Vue小记(1)——输入框之文本框的大小改变

官方文档:

input Attributes

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

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禁用booleanfalse
value-key输入建议对象中用于显示的键名stringvalue
value必填值,输入绑定值string
debounce获取输入建议的去抖延时number300
placement菜单弹出位置stringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestions返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它Function(queryString, callback)
popper-classAutocomplete 下拉列表的类名string
trigger-on-focus是否在输入框 focus 时显示建议列表booleantrue
name原生属性string
select-when-unmatched在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件booleanfalse
label输入框关联的label文字string
prefix-icon输入框头部图标string
suffix-icon输入框尾部图标string
hide-loading是否隐藏远程加载时的加载图标booleanfalse

Autocomplete Slots

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

Autocomplete Scoped Slot

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

Autocomplete Events

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

Autocomplete Methods

方法名说明参数
focus使 input 获取焦点
参数说明类型可选值默认值
type类型stringtext,textarea 和其他 原生 input 的 type 值text
value绑定值string / number
maxlength原生属性,最大输入长度number
minlength原生属性,最小输入长度number
placeholder输入框占位文本string
clearable是否可清空booleanfalse
disabled禁用booleanfalse
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 >


  • 5
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JovanDong

可以不可以给我买一支棒棒糖

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值