vue computed使用场景,vue的使用方式和场景
本文主要介绍了vue中输入框的使用场景总结，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
输入框1的使用场景总结。自动对焦2。如何优雅地实现以下效果？关于输入框的一些操作
输入框的使用场景总结
1. 自动聚焦
第1种方法：使用 $nextTick
input ref= my input v-model= text /
已安装(){
这个。$nextTick(function () {
这个。$ refs . my input . focus()；
});
},
第2种方法：自定义 v-focus 指令
为了方便起见，这里使用jquery
Vue.directive(focus ，{
已插入(el) {
//基于本机输入包的兼容元素输入框组件
let inner input=El . query selector( input )；
if (innerInput) {
inner input . focus()；
//与本机输入兼容
}否则{
El . focus()；
}
},
});
如果你有一个可以控制输入框显示和隐藏的按钮，并且每次显示都需要自动聚焦，那么你应该使用v-if而不是v-show，因为只有v-if才能触发自定义指令的插入生命周期功能。
输入v-if= visible v-focus v-model= text /
2. 如何优雅的实现下面效果
效果描述：我们在开发表格的时候，经常会遇到一个输入框。当输入框被聚焦时，输入框后面的“保存”按钮将被显示。当它不在焦点上时，后面的“保存”按钮将被隐藏。单击保存保存输入框的内容。当输入框失焦时(点击保存按钮保存成功除外)，输入框中的内容应该显示原来的内容。
这里的实现会有一些恶心的东西，比如当你点击保存按钮时，输入框失焦，保存按钮先被隐藏，所以不会触发按钮上绑定的click事件，等等。话不多说，直接上代码，看看怎么优雅的实现。
代码实现：
模板
差异
el表
:data=tableData
边界
El-表格-列
Label=商家代码
宽度=200
模板slot-scope={row，$index}
投入
style= width:100px；
v-model= row . skuuterid
@focus=toggleFocus($event，$index，row，true)
@blur=toggleFocus($event，$index，row，false)
/
el按钮
:class=`J_saveBtn_${$index} `
:ref=saveBtn_ $index
v-show=row.showSaveBtn
type=primary
保护
/el-button
/模板
/El-表格-列
/el-table
/div
/模板
脚本
导出默认值{
data() {
返回{
表格数据：[
{
skouterid: 123 ，
oldskouterid: 123 ，
showSaveBtn: false，
}
]
};
},
方法：{
toggleFocus(e，$index，data={}，isFocus=false) {
//焦点
if (isFocus) {
data.showSaveBtn=true
//焦点不在
}否则{
//点击“保存”退出焦点(判断关联的目标元素是否为焦点退出时输入框后面的保存按钮)
if (e.relatedTarget===this。$refs[`saveBtn_${$index}`]。$el) {
axios . post(/updateskuuterid ，{ skuuterid:data . skuuterid })。然后(res={
//保存成功
data . oldskuuterid=data . skuuterid；
}).catch(()={
data . skuuterid=data . oldskuuterid；
});
//单击其他地址以脱离焦点
}否则{
data . skuuterid=data . oldskuuterid；
}
data.showSaveBtn=false
}
},
},
};
/脚本
当上述代码中有水平滚动条时，如果e.related target===this。$ refs [` savebtn _ $ {$ index }`]。$ el是假的，但是我们觉得失焦的目标元素是保存按钮。我们可以这样改变判断条件：
e.relatedTarget===this。$refs[`saveBtn_${$index}`]。$el
//更改为(下面使用jQuery)
$(e.relatedTarget)。hasClass(`J_saveBtn_${$index} `)
没关系！
关于输入框的一些操作
关于输入框
监听输入
失去焦点的事件
模板
div class=orderinfo
input type= text v-model= text @ blur= blur()
/div
/模板
脚本
导出默认值{
名称：订单信息，
data() {
返回{
文本：""
};
},
已安装(){},
观察：{
//监听输入框输入
文本：函数(瓦尔){
如果(值长度0) {
console.log(显示删除)
}否则{
console.log(不显示删除)
}
}
},
方法：{
//失去焦点
模糊(){
console.log(this.text)
}
}
};
/脚本
样式范围的语言=scss
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。