vue组件中的TagsInput

这篇文章主要讲解了vue组件中的TagsInput,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

<代码> TagsInput> vue>

先看效果图、下面会一步一步实现他。

注:以下代码需要vue-cli环境才能执行

<强>(一)伪造一个输入框

因为单行的文本框只能展示纯文本,所以图里面的标签实际上都是<代码> html元素> & lt; template> 　　& lt; div类=癿uli-tags"@click=& # 39;关注# 39;比; 　　& lt;按钮类=& # 39;btn # 39;v代表=& # 39;在标签(标签,指数)# 39;:关键=& # 39;指数# 39;比; 　　{{标签}} 　　& lt;/button> 　　& lt;输入类型=皌ext"ref=& # 39;输入# 39;v模型=& # 39;目前# 39;比; 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　出口默认{ 　　名称:& # 39;TagsInput& # 39; 　　方法:{ 　　focus () { 　　refs.input.focus美元。() 　　}， 　　}， 　　数据(){ 　　返回{ 　　标签:[], 　　当前:& # 39;& # 39; 　　} 　　} 　　} 　　& lt;/script> 　　 　　& lt;风格lang=& # 39;少# 39;比; 　　.muli-tags { 　　填充:5 px 10 px; 　　显示:块; 　　边界:1 px固体# ccc; 　　输入{ 　　背景:透明; 　　} 　　} 　　.btn { 　　保证金:0 5 px 3 px 0; 　　填充:4 px 5 px; 　　背景:# fff; 　　边界:1 px固体# eee; 　　不必:0 0 4 px; 　　} 　　& lt;/style>

<强>(二)监听输入

在伪造好一个输入框之后,我们对输入框的事件进行处理,

<李>回车和逗号会把输入的值添加到标签数组,然后清空输入李 <>李添加值之前,判断标记数组是否已经包含同名的值 <李>按回退键,删除最近的一个标签

//@keydown。188年188代表是是分号键的键码
　　& lt;输入类型=皌ext"
　　ref=& # 39;输入# 39;
　　@keyup.enter=癮dd"
　　@keydown.delete=癲el"
　　@keydown.188=& # 39;分裂# 39;
　　v模型=& # 39;目前# 39;比;
　　
　　方法:{//按下分号键的时候,需要阻止默认事件,否则会出现分号
　　分割(e) {
　　e.preventDefault ()
　　this.add (e)
　　}，
　　添加(e) {
　　const val=e.target.value
　　如果(val)返回//如果已经存在相同标签,不再添加
　　如果(this.tags.indexOf (val)比;1)返回//把输入值添加到标签,并清空文本框
　　this.tags.push (val)
　　这一点。当前=& # 39;& # 39;
　　}，
　　德尔(e) {//当文本框内没有值,再按回退键,则删除最后一个标签
　　如果(! e.target.value.length) {
　　this.tags.pop ()
　　}
　　}，
　　}

<>强(三)删除标签

前面都是通过键盘来操作标签,鼠标点击标签应该也是可以删除的

//道具
　　道具:{
　　价值:数组,
　　要求:没错,
　　默认值:()=比;[]
　　}//计算
　　计算:{
　　标签(){
　　返回this.value.slice ()
　　}
　　}//方法
　　方法:{//删除点击的标签
　　delTag(指数){
　　this.tags。拼接(指数(1)
　　美元。排放(& # 39;输入# 39;,this.tags)
　　}
　　}

//TagsInput.vue
　　& lt; template>
　　& lt; div类=癿uli-tags"@click=& # 39;关注# 39;比;
　　& lt;按钮类=& # 39;btn # 39;v代表=& # 39;在标签(标签,指数)# 39;:关键=& # 39;指数# 39;@click=& # 39; delTag(指数)& # 39;在{{标签}}& lt; span> x & lt;/button>
　　& lt;输入类型=皌ext"
　　ref=& # 39;输入# 39;
　　@keyup.enter=癮dd"
　　@keydown.delete=癲el"
　　@keydown.188=& # 39;分裂# 39;
　　v模型=& # 39;目前# 39;比;
　　& lt;/div>
　　& lt;/template>
　　
　　& lt; script>
　　出口默认{
　　道具:{
　　价值:数组,
　　要求:没错,
　　默认值:()=比;[]
　　}，
　　方法:{
　　focus () {
　　refs.input.focus美元。()
　　}，
　　分割(e) {
　　e.preventDefault ()
　　this.add (e)
　　}，
　　添加(e) {
　　const val=e.target.value
　　如果(val)返回
　　如果(this.tags.indexOf (val)比;1)返回
　　this.tags.push (val)
　　美元。排放(& # 39;输入# 39;,this.tags)
　　这一点。当前=& # 39;& # 39;
　　}，
　　德尔(e) {
　　如果(! e.target.value.length) {
　　this.tags.pop ()
　　美元。排放(& # 39;输入# 39;,this.tags)
　　}
　　}，
　　delTag(指数){
　　this.tags。拼接(指数(1)
　　美元。排放(& # 39;输入# 39;,this.tags)
　　}
　　}，
　　计算:{
　　标签(){
　　返回this.value.slice ()
　　}
　　}，
　　数据(){
　　返回{
　　当前:& # 39;& # 39;
　　}
　　}
　　}
　　& lt;/script>
　　
　　& lt;风格lang=& # 39;少# 39;比;
　　.muli-tags {
　　填充:5 px 10 px;
　　显示:块;
　　边界:1 px固体# ccc;
　　输入{
　　背景:透明;
　　}
　　.btn {
　　保证金:0 5 px 3 px 0;
　　填充:4 px 5 px;
　　背景:# fff;
　　边界:1 px固体# eee;
　　不必:0 0 4 px;
　　}
　　}
　　& lt;/style> 
vue组件中的TagsInput