我要评论又来分享一点点工作积累及解决方案
产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上，经过尝试与改造完成如下：
<template>
<div class="tags-view" @click="begininput">
<el-tag :key="index" v-for="(tag, index) in dynamictags" closable :disable-transitions="false"
@close="handleclose(index)">
{{ tag }}
</el-tag>
<el-input v-if="inputvisible" class="input-new-tag" style="width: 100%;" v-model="inputvalue" ref="savetaginput"
size="small" @keyup.enter.native="handleinputconfirm" @blur="handleinputconfirm">
</el-input>
<!-- <el-button v-else class="button-new-tag" size="small" @click="showinput">+</el-button> -->
</div>
</template>
<script>
export default {
name: 'inputtag',
props: {
tags: {
type: array,
default: []
},
},
watch: {
tags: {
deep: true,
immediate: true,
handler(val) {
this.dynamictags = val || []
}
}
},
data() {
return {
dynamictags: [],
inputvisible: false,
inputvalue: ''
};
},
methods: {
handleclose(index) {
this.dynamictags.splice(index, 1);
},
showinput() {
this.inputvisible = true;
this.$nexttick(_ => {
this.$refs.savetaginput.$refs.input.focus();
});
},
begininput() {
this.showinput();
},
handleinputconfirm() {
let inputvalue = this.inputvalue;
if (inputvalue) {
this.dynamictags.push(inputvalue);
}
const inputelement = this.$refs.savetaginput.$refs.input; // 获取input dom元素
const isfocused = document.activeelement === inputelement; // 判断是否为当前焦点
this.inputvisible = isfocused;
this.inputvalue = '';
this.$emit('changed', this.dynamictags)
}
}
}
</script>
<style lang="scss" scoped>
.tags-view {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
min-height: 32px;
padding: 4px 5px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.button-new-tag {
margin-left: 10px;
height: 24px;
line-height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
height: 24px;
line-height: 24px;
width: 90px;
//margin-left: 10px;
vertical-align: bottom;
}
::v-deep {
.el-tag {
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
.el-input__inner {
height: 24px;
line-height: 24px;
border: none;
padding: 0px 5px;
}
}
</style>组件的使用：
import inputtag from '../components/inputtag.vue'
tags用于默认值的回调，changed事件用于组件数据发生变化时的回调通知。
<inputtag class="w-100" :tags="tagsvalue" @changed="tagschanged"></inputtag>
组件本身也比较简单，没有啥值得去细分和品评的技术点
enter事件和blur事件走了同一个事件，会导致输入不连续，为解决这个问题，我们只需要判断当前input是不是焦点，如果是，则不隐藏输入框即可，如下isfoucsed变量的判断即为是否本身自己是当前焦点的input!
handleinputconfirm() {
let inputvalue = this.inputvalue;
if (inputvalue) {
this.dynamictags.push(inputvalue);
}
const inputelement = this.$refs.savetaginput.$refs.input; // 获取input dom元素
const isfocused = document.activeelement === inputelement; // 判断是否为当前焦点
this.inputvisible = isfocused;
this.inputvalue = '';
this.$emit('changed', this.dynamictags)
}总结
到此这篇关于vue2 web多标签输入框elinput是否当前焦点的文章就介绍到这了,更多相关vue2 elinput是否当前焦点内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论