前提
这个效果我是写在vue上的,小伙伴们需要会vue的知识,不然可能看不懂,其实实现的难度并不高
效果
代码
<template>
<div>
<el-row :gutter="15" >
<el-col :span="4">文章标签:</el-col>
<el-col :span="20">
<span v-if="isLabel">
<input v-model="TemLabel" class="diaInput" type="text"/>
<i @click="LabelFalse()" class="el-icon-close" style="cursor: pointer;"></i>
</span>
<span v-for="item in temporaryLabel">
<input :value="item" class="diaInput" type="text"/>
<i @click="LabelFalse(item)" class="el-icon-close" style="cursor: pointer;"></i>
</span>
<span @click="addLabel" style="color: #007FFF;cursor: pointer;">
<i class="el-icon-circle-plus-outline"></i> 添加标签
</span>
</el-col>
</el-row>
</div>
<template>
<script>
export default{
name:'Dialog',
data () {
return {
isLabel:false, //标签显示判断
TemLabel:'',//标签临时字符串
temporaryLabel:[], //标签临时数组
}
},
methods:{
addLabel(){
this.isLabel=true
if(this.TemLabel.length<=0){
return
}
if(this.TemLabel!=" "){
this.temporaryLabel.unshift(this.TemLabel);
}
this.TemLabel=" ";
},
LabelFalse(val){
if(val== undefined){
this.TemLabel=" "
}else{
let index=this.temporaryLabel.indexOf(val);
this.temporaryLabel.splice(index,1)
return;
}
this.isLabel=false;
},
submit(){
let labelArray=[];
if(this.TemLabel!=" "){
labelArray.push(this.TemLabel);
}
if(this.temporaryLabel.length>0){
console.log(this.temporaryLabel);
labelArray.push.apply(labelArray,this.temporaryLabel);
}
alert(labelArray)
}
}
}
</script>
样式我就不贴出来了,大家都懂
实现思路
第一个输入框input是写死的,第二个以上是通过遍历数组动态添加的
- 点击“添加标签”弹出输入框,当只添加一个标签时,在提交的时候直接获取输入框内容
- 当我们所添加的标签不只一个时,比如3个,那么除了第一个标签,剩下的2个就添加到
一个数组中