分享一个可以自动检测是否出现省略号的vue指令
Demo预览：
https://sunzsh.github.io/vue-demos/#/ellipsis
代码 / 文件：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/trunced.js
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/ellipsis.vue
再给大家分享一个好玩的哈
我不是写了一个这样自动出现省略
号的样式吗
那我现在就想
实时的知道他有没有出现省略号
然后呢我就写了一个指令
用起来特别简单哈
首先呢我们先准备一个变量
就true/false就行了
然后呢
我们就在这个需要监测的这个节点上
加一个
v-trunced
等于这个变量
好我们再来试一下
现在是false对吧
大家看：true
false
包括呢我们改变这个大小
大家看
它也会自动识别
那这个指令怎么用呢
大家就把这个文件放到项目里
然后再main.js里边去把它引进来
然后use一下就可以了
只是呢有一点就是
我依赖了这个类库
来监测这个元素的变化
这个类库大部分框架已经引入（依赖）了
比如说饿了么UI他已经有了
所以如果你用了饿了么UI
你就不用再引一遍了
如果大家项目里没有用饿了么UI
或者其他框架也没有依赖这个类库呢
大家自己安装一下就好了
然后最后啊
再给大家分享几个高级的用法
就是这块也可以绑定一个对象
就是比如说
我这有一个object
然后呢叫sl2（省略2）吧
默认 false
我们绑定这个对象怎么办呢
在这儿写obj
然后呢在这儿写
冒号
sl2（省略2）
然后把它改成obj.sl
我们看一下
现在是false、true
那这个有啥用呢
就是如果你在循环里这个就有用了
比如说这个放item
然后就可以
改变item里边的某一个属性了
然后第二个呢
就是它有可能需要检测它父级的元素
比如说我在这里写一个
span标签
然后呢我现在只能把这个指令啊
放到这里边为什么呢
因为有可能这是一个插槽
我们把这个指令放插头上不起作用
所以呢放到这
放到这怎么办呢我们在这写一个
.parent
这样也是可以的
我们再来试一下
大家看也是没问题的
但如果我把这个parent去掉
大家看它就不不起作用了
因为它监测的就是它这个span标签了
然后这个代码呢
我还是放到这个demo里了
大家需要的话自己来拿
最后更新于
这有帮助吗？