ElementUI 后台管理模板中使用自定义指令截取字符串长度加省略号

eleadmin / 2023-08-18 / 原文

在使用vue3 + ElementPlus开发中，尤其在开发cms项目时，新闻标题需要控制字符串长度。重复写截取字符串样式非常麻烦。

在最近开发 Vue + ElementPlus 后台管理框架时，装成一个自定义指令。方便使用。

废话不多说，直接上代码。

1、在项目根目录新建一个文件夹： directives

2、在新建好的文件夹下新建js文件，文件名：ellipsis.js

3、ellipsis.js 代码如下：

export default {
  //如果app.use()中的插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。
  //install 方法调用时，会将 app 作为参数传入,此时就可以在别的文件中使用app.directive()了
  install(app) {
    app.directive('ellipsis', (el, binding) => {
      el.style.width = binding.value.width + 'px'
      el.style.display = '-webkit-box'
      el.style.webkitBoxOrient = 'vertical'
      el.style.webkitLineClamp = binding.value.line
      el.style.overflow = 'hidden'
    })
  }
}

4、然后在main.js 中注册自定义指令

// 截取文本显示省略号
import ellipsis from '@/directives/ellipsis' //引入ellipsis.js

const app = createApp(App)

app.use(ellipsis)

5、在模板中使用：

<span v-ellipsis="{ width: 500, line: 1 }" style="color: #409eff">
            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
          </span>

如果没有看明白，请查看项目演示：http://demo.eleadmin.cn/login