📒 背景
最近项目中需要制作一个双击编辑单击选中可删除Tag标签（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。
🔍需求功能
1.element-ui组件只能删除，不能选中和直接编辑；
2.双击可编辑；
3.单击选中，颜色变化；
4.有删除按钮；
👣设计开发
先说一下我的开发环境版本：
node: v11.3.0
npm: 6.4.1
vue：2.5.11
如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来~
1.先写静态样式html:
<div class='zTag' @click="checked" @dblclick.stop="edited" :class="{'hover':isSelected}">
<input ref="input" type="text" v-if="isEdit" v-model="data" @keyup.enter="edited" @blur="edited">
<span>
<b >{{data}}</b>
<i @click.stop="remove">X</i>
</span>
</div>2.给html加css样式：
.zTag{
position: relative;
display: inline-block;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #eee;
color: #333;
cursor: pointer;
min-width: 10px;
min-height: 30px;
font-family: '微软雅黑';
overflow: hidden;
padding: 0 15px 0 5px;
&.hover{
color:#1676ff;
background: #a6cff5;
border-color: #5a9af5;
i{
color:#999;
}
}
input{
position: absolute;
left: 0;
top:0;
outline: none;
border: none;
width: 100%;
display: block;
font-size: 12px;
line-height: 30px;
font-family: '微软雅黑';
color: #333;
padding: 0 10px 0 5px;
}
span{
display: inline-block;
// padding: 0 15px 0 5px;
b{
font-weight: normal;
font-family: '微软雅黑';
font-size: 12px;
line-height: 30px;
}
}
i{
position: absolute;
right: 5px;
top:5px;
text-decoration: normal;
&:hover{
color:#1676ff;
}
}
}3.给标签加点击事件和双击事件：
// 选中
checked(){
this.isSelected = !this.isSelected;
this.$emit('selected', this.data);
},
// 编辑状态切换
edited(){
this.isEdit = !this.isEdit;
if(this.isEdit){
this.$nextTick(_ => {
this.$refs.input.focus()
})
}else{
this.$input('value', this.data);
}
},
// 删除
remove(){
console.log('remove')
this.$emit('remove')
}4.数据考虑传参：
props:{
value:{
type:String,
default:'标签'
}
},
data(){
return{
data: this.value,
isEdit: false,
isSelected: false,
}
},本组件只用于学习交流哈！如上关闭按钮可以调父级操作删除或者清空功能，效果如下：
🚀写在最后
如果本文中有bug、逻辑错误，或者您有更好的优化方案欢迎评论联系我哦！~关注我持续分享日常工作中的组件设计和学习分享，一起进步加油！