关于vue中输入框的使用场景总结
作者：huangpb0624
这篇文章主要介绍了关于vue中输入框的使用场景总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
输入框的使用场景总结
1. 自动聚焦
第1种方法：使用 $nextTick
<input ref="myInput" v-model="text"/>
mounted() {
this.$nextTick(function () {
this.$refs.myInput.focus();
});
},第2种方法：自定义 v-focus 指令
为了方便，这里用到了 jquery
Vue.directive('focus', {
inserted(el) {
// 兼容 Element 基于原生 input 封装的输入框组件
let innerInput = el.querySelector('input');
if (innerInput) {
innerInput.focus();
// 兼容原生 input
} else {
el.focus();
}
},
});如果你有一个按钮可以控制输入框的显示和隐藏，需要每次显示的时候都自动聚焦，那要 v-if 而不能使用 v-show，因为只有 v-if 才能触发自定义指令的 inserted 生命周期函数。
<input v-if="visible" v-focus v-model="text"/>
2. 如何优雅的实现下面效果
效果描述：我们在开发表格的时候经常会遇到一个输入框，输入框聚焦的时候会显示输入框后面的“保存”按钮，失焦的时候后面的“保存”按钮隐藏。点击保存，保存输入框里面的内容。输入框失焦的时候（点击保存按钮保存成功除外），输入框里面的内容要显示原先的内容。
这里实现的时候会遇到一些比较恶心的地方，比如说，点击保存按钮，输入框失焦了，保存按钮先隐藏了，就不会触发按钮上绑定的点击事件，等等。话不多说，直接上代码，看怎么优雅的去实现它。
代码实现：
<template>
<div>
<el-table
:data="tableData"
border
>
<el-table-column
label="商家编码"
width="200"
>
<template slot-scope="{row, $index}">
<input
style="width: 100px;"
v-model="row.skuOuterId"
@focus="toggleFocus($event, $index, row, true)"
@blur="toggleFocus($event, $index, row, false)"
/>
<el-button
:class="`J_saveBtn_${$index}`"
:ref="'saveBtn_' + $index"
v-show="row.showSaveBtn"
type="primary"
>保存
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template><script>
export default {
data() {
return {
tableData: [
{
skuOuterId: '123',
oldSkuOuterId: '123',
showSaveBtn: false,
}
]
};
},
methods: {
toggleFocus(e, $index, data = {}, isFocus = false) {
// 聚焦
if (isFocus) {
data.showSaveBtn = true;
// 失焦
} else {
// 点击“保存”失焦（判断失焦时关联的目标元素是不是输入框后面的保存按钮）
if (e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el) {
axios.post('/updateSkuOuterId', {skuOuterId: data.skuOuterId}).then(res => {
// 保存成功
data.oldSkuOuterId = data.skuOuterId;
}).catch(() => {
data.skuOuterId = data.oldSkuOuterId;
});
// 点击其他地址失焦
} else {
data.skuOuterId = data.oldSkuOuterId;
}
data.showSaveBtn = false;
}
},
},
};
</script>上面的代码在有横向滚动条的时候，如果出现了 e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el 为 false，但我们感觉失焦的目标元素就是保存按钮的情况，我们可以把判断条件这么改一下：
e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el
// 改成（下面使用了jQuery）
$(e.relatedTarget).hasClass(`J_saveBtn_${$index}`）这样就 OK 了！
关于输入框的一些操作
关于输入框
监听输入
失去焦点的事件
<template> <div class="orderinfo"> <input type="text" v-model="text" @blur="blur()"> </div> </template>
<script>
export default {
name: "Orderinfo",
data() {
return {
text:''
};
},
mounted() {},
watch: {
// 监听输入框输入
text: function(val) {
if (val.length > 0) {
console.log('显示删除')
} else {
console.log('不显示删除')
}
}
},
methods: {
//失去焦点
blur(){
console.log(this.text)
}
}
};
</script>
<style scoped lang="scss">
</style>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。