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>

通用指令

| 名称 | 参数 | 说明 | | --- | --- | --- | | v-drag| {top: 0, left: 0} | 拖拽指令 | | v-auth | [ ] 或者 {key, list} | 权限指令，注意localStorage的key值为"permission" | | v-lazy | 默认图片 | 图片懒加载 | | v-trunced | 传入变量 | 监听变量值，检测是否超出边界 |

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