改造el-tag动态编辑标签，支持自动提示（上）
Demo预览：
https://sunzsh.github.io/vue-demos/#/autocomplete-tag-demo
代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/Autocomplete2/index.vue
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/autocomplete-tag-demo.vue
大家记不记得
饿了么UI里有这样一个动态
编辑标签的demo
就是我可以在这里点击
然后自己输入标签
其实就是一个按钮
和一个文本框的切换
然后呢我就想
能不能把这个文本框啊
换成饿了么UI的这个
autocomplete
我就试了一下
把原来demo里这个input注视掉
换成这个autocomplete
但是呢它有两个bug
我们先来看第一个
就是啊它展开的这个层
默认只能跟文本框是一样宽度的
所以导致
我下边这里边的内容
有的就显示不完整
但是呢
我又不想修改这个文本框的宽度
因为他默认是跟这个按钮是一样宽的
文本框改的太宽的话就不好看了
所以呢我们需要想办法
突破它原来这个宽度的限制
那怎么解决呢
我们先来看它这个Autocomplete的源码哈
它这里边有一个watch监听
监听这个建议的层的展开的时候
它会向这个组件
广播一个visible的事件
我们先来看这个组件
在这里
然后呢
它会在这里边广播一个visible的事件
大家看在这里
他接收的这个第二个参数就会作为
弹开的这个层的宽度
所以呢
问题的关键就是刚才他在传递的时候
在这里传的这个宽度
他现在默认指传这个文本框的宽度
所以呢我们就从这个地方入手
我们再写一个组件叫Autocomplete
同时我们再定义一个参数叫popperWidth
然后我们在这个监听
suggestionVisible的时候呢
我们优先去取这个PopperWidth就
可以了其实很简单
我们再回到这个demo
那这个时候呢
我们把它换成我们自己封装
这个组件下边我已经导进来了哈
我把这个复制一下 autocomplete
好我们直接把它拿过来呢
先看一下原来的功能是不是都可以
刷新一下
大家看 是可以的
然后这还是不行
这时候呢我们再给它加一个参数叫
:popper-width
我们不用200，用120就够了
刷新一下
大家看 这就够宽了
好这是第一个问题
那第二个bug是什么呢
我们先来看一下这个操作哈
首先我这里可以随便输入
然后呢onblur的时候他就加进来
然后呢我还可以在下边选
大家看 但是如果我在这输入了
大家看 筛选出来了两个如果选"SUV"
注意它还是我输入的那个v进来了
为什么会这样呢
因为它会先触发这个blur事件
它就会把这个文本框里的内容
直接放进去了
那由于时间原因啊
这个问题我们放到下一期
大家如果感兴趣的话呢
可以自己研究一下
最后更新于
这有帮助吗？