手撕CSDN发布文章时的动态添加标签

前提

这个效果我是写在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"/>
				&nbsp;<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"/>
				&nbsp;<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>&nbsp;添加标签
			</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个就添加到
  一个数组中