Vue小记（1）——输入框之文本框的大小改变

官方文档：input Attributes参数说明类型可选值默认值type类型stringtext，textarea 和其他原生 input 的 type 值textvalue绑定值string / number——maxlength原生属性，最大输入长度number——minlength原生属性，最小输入长度number——placeholder输入框占位文本string——clearable

JovanDong

31961人浏览 · 2018-06-19 13:51:00

JovanDong · 2018-06-19 13:51:00 发布

官方文档：

input Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他原生 input 的 type 值	text
value	绑定值	string / number	—	—
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 `type!="textarea"` 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 `type="textarea"` 有效	number	—	2
autosize	自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
auto-complete	原生属性，自动补全	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	-	-

¶Input Slots

name	说明
prefix	输入框头部内容，只对 `type="text"` 有效
suffix	输入框尾部内容，只对 `type="text"` 有效
prepend	输入框前置内容，只对 `type="text"` 有效
append	输入框后置内容，只对 `type="text"` 有效

¶Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	在 Input 值改变时触发	(value: string \| number)
clear	在点击由 `clearable` 属性生成的清空按钮时触发	—

¶Input Methods

方法名	说明	参数
focus	使 input 获取焦点	—
blur	使 input 失去焦点	—
select	选中 input 中的文字	—

¶Autocomplete Attributes

参数	说明	类型	可选值	默认值
placeholder	输入框占位文本	string	—	—
disabled	禁用	boolean	—	false
value-key	输入建议对象中用于显示的键名	string	—	value
value	必填值，输入绑定值	string	—	—
debounce	获取输入建议的去抖延时	number	—	300
placement	菜单弹出位置	string	top / top-start / top-end / bottom / bottom-start / bottom-end	bottom-start
fetch-suggestions	返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它	Function(queryString, callback)	—	—
popper-class	Autocomplete 下拉列表的类名	string	—	—
trigger-on-focus	是否在输入框 focus 时显示建议列表	boolean	—	true
name	原生属性	string	—	—
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件	boolean	—	false
label	输入框关联的label文字	string	—	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
hide-loading	是否隐藏远程加载时的加载图标	boolean	—	false

¶Autocomplete Slots

name	说明
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容

¶Autocomplete Scoped Slot

name	说明
—	自定义输入建议，参数为 { item }

¶Autocomplete Events

事件名称	说明	回调参数
select	点击选中建议项时触发	选中建议项

¶Autocomplete Methods

方法名	说明	参数
focus	使 input 获取焦点

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他原生 input 的 type 值	text
value	绑定值	string / number	—	—
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 `type!="textarea"` 时有效

今天写东西，本想着用自带属性去改变样式，但是改了几次毫无效果！可以通过绑定这个大小改变<el-form-item label="活动形式">
    <el-input type="textarea" :rows="7" v-model="form.desc"></el-input>
</el-form-item>

最后改成这样，解决了：

 
  < 
  el-form-item 
  label= 
  "点评" 
  > 
 
 
  < 
  el-input 
 
 
             type = 
  "textarea" 
 
 
   :rows =" 
  7" 
 
 
   placeholder = 
  "请输入内容" 
 
 
   style = 
  "width:800px;" 
  > 
  </ 
  el-input 
  > 
 
 
  </ 
  el-form-item 
  > 
 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

JovanDong

@Mr_dong_ya_yun

已为社区贡献8条内容