# 分享一个可以自动检测是否出现省略号的vue指令

* 抖音：[https://v.douyin.com/hKekJHx/](https://v.douyin.com/hKekJHx/)
* B站：[https://www.bilibili.com/video/BV1WA411Q7Qt/](https://www.bilibili.com/video/BV1WA411Q7Qt/)

> **Demo预览：**
>
> [https://sunzsh.github.io/vue-demos/#/ellipsis](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/components/trunced.js)
>
> [https://github.com/sunzsh/vue-el-demo/blob/master/src/views/ellipsis.vue](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里了

大家需要的话自己来拿
