场景:input输入框enter事件和blur事件要实现相同效果,所以绑定了同一函数
问题:按下回车时往往又会同时触发 blur 事件,按下回车的时候,这个函数其实调用了两次
解决:
@keyup.enter.native="$event.target.blur"
@blur="blurSeq(scope.$index,scope.row[item.prop])"
代码如下
<template>
<div>
<span v-if="!txt[scope.$index].editAbled" style="padding-right:10px">{{ scope.row[item.prop] }}</span>
<el-input
v-else
v-focus
@keyup.enter.native="$event.target.blur"
@blur="blurSeq(scope.$index,scope.row[item.prop])"
v-model="scope.row[item.prop]" placeholder="请输入序号"
></el-input>
<i class="el-icon-edit" v-if="!txt[scope.$index].editAbled" @click="editSeq(scope.$index,scope.row[item.prop])" style="margin-left: 5px;font-size: 16px;"></i>
</div>
</template>
<script>
export default {
name: '',
components: {},
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.querySelector('input').focus()
}
}
},
props: {},
data() {
return {
txt:[]
}
},
watch: {},
computed: {},
created() {},
mounted() {},
methods: {
editSeq(){
this.$set(this.txt[index], 'editAbled', true)
},
blurSeq(){
this.$set(this.txt[index], 'editAbled', false)
/**以及一些其他处理 */
}
},
destroyed() {}
}
</script>
<style lang='scss'>
</style>