sz-directive v1.0.3

sz-directive

数政常用指令

下载

npm i sz-directive

使用方式

import SzDirective from 'sz-directive'

Vue.use(SzDirective)

按需要引入方式

import { tooltip } from 'sz-directive'

Vue.directive('tooltip', tooltip);

vue项目使用

<template>
  <div id="app">
    <div v-tooltip class="single-ellipsis" style="width: 100px">
      1阿萨斯撒撒奥撒阿萨斯撒撒奥撒撒所撒撒撒阿萨斯撒撒奥撒撒所撒撒撒撒所撒撒撒
    </div>
    <div v-tooltip class="single-ellipsis" style="width: 100px">
      2阿萨斯撒撒奥撒阿萨斯撒撒奥撒撒所撒撒撒阿萨斯撒撒奥撒撒所撒撒撒撒所撒撒撒
    </div>
    <div v-tooltip class="single-ellipsis" style="width: 100px">
      3阿萨斯撒撒奥撒阿萨斯撒撒奥撒撒所撒撒撒阿萨斯撒撒奥撒撒所撒撒撒撒所撒撒撒
    </div>
    <div v-tooltip class="single-ellipsis" style="width: 100px">
      4阿萨斯撒撒奥撒阿萨斯撒撒奥撒撒所撒撒撒阿萨斯撒撒奥撒撒所撒撒撒撒所撒撒撒
    </div>
    <div v-tooltip class="single-ellipsis" style="width: 100px">
      5阿萨斯撒撒奥撒阿萨斯撒撒奥撒撒所撒撒撒阿萨斯撒撒奥撒撒所撒撒撒撒所撒撒撒
    </div>

    <el-tooltip
      effect="dark"
      placement="top"
      ref="tooltip"
      :content="content"
    ></el-tooltip>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      content: "",
    };
  },
};
</script>

<style lang="scss">
#app {
  .single-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

通用指令

注：后面会持续迭代，有问题或者添加新功能在评论区留言，及时更新