vue封装的Tag标签双击编辑单击选中可删除
作者：啥咕啦呛
项目中需要制作一个双击编辑单击选中可删除Tag标签,本文就来介绍一下如何实现,具有一定的参考价值,感兴趣的可以了解一下
背景
最近项目中需要制作一个双击编辑单击选中可删除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,
}
},本组件只用于学习交流哈！如上关闭按钮可以调父级操作删除或者清空功能，效果如下：
到此这篇关于vue封装的Tag标签双击编辑单击选中可删除的文章就介绍到这了,更多相关vue Tag标签双击编辑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！