导读:van-field 输入框常常用来做基础输入框使用,这次使用要在虚拟键盘上点击按钮【发送】然后做逻辑处理,enterkeyhint属性可以将键盘上的回车/换行 键修改成其他显示项。
enterkeyhint
允许用户改变虚拟键上“Enter”的外观
- enter 默认值,键盘显示 换行 或者“Enter”
- done 键盘显示 “完成” 或者 “Done”
- go 键盘显示 前往 或者“Go”
- next 键盘显示 “下一项” 或者 “Next”
- search 键盘显示 “搜索” 或者“Search”
- send 键盘显示 “发送” 或 “Send”
- previous 键盘显示 “换行” 或 “return”
配合@keydown.enter.prevent="handler"键盘监听enter事件,自定义处理函数handler,就能实现点击回车键进行逻辑处理了。
@input
监听用户输入
autosize
值是一个对象 { maxHeight: 100, minHeight: 50 },设置输入框的高度,最大高度maxHeight和 最小高度minHeight;
注意:这里autosize可以定义成一个ref响应式,在获取外层盒子的高度height,然后autosize.maxHeight = height来适应不同屏幕的高度!
type
输入框类型
maxlength
设置最多字数
placeholder
提示语
总结
template
<main =>
<van-cell-group inset>
<van-field
v-model="inputTxt"
@input="inputHandler"
@keydown.enter.prevent="enterHandler"
enterkeyhint="send"
rows="5"
:autosize="autosize"
type="textarea"
maxlength="1000"
placeholder="请输入..."
/>
</van-cell-group>
</main>
css部分
/deep/ .van-cell {
padding: 0;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
border: none;
}
.van-cell-group--inset {
margin: 0;
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
}
/deep/.van-field__control {
font-size: 24px;
font-weight: 500;
color: #000;
line-height: 45px;
max-height: 100%;
resize: none;
}
js部分
mounted(){
this.$nextTick(()=>{
this.autosize = { maxHeight: outerDiv.clientHeight, minHeight: 10 }
})
},
methods(){
inputHandler(value){
console.log(value)
},
enterHandler(){}
}