# sz-directive

> 数政常用指令

Latest version **1.0.5** (published 2024-07-26) · 0 weekly downloads

## Install

```sh
npm install sz-directive
pnpm add sz-directive
yarn add sz-directive
bun add sz-directive
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2024-07-26 |
| First published | 2023-05-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | taiyang |
| Maintainers | chenstar |

## Links

- npm: https://www.npmjs.com/package/sz-directive
- npm.io page: https://npm.io/package/sz-directive

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [element-ui](https://npm.io/package/element-ui.md) ^2.4.5
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 1.0.5 (latest) — 2024-07-26
- 1.0.4 — 2024-07-26
- 1.0.3 — 2023-05-29
- 1.0.2 — 2023-05-29
- 1.0.1 — 2023-05-24
- 1.0.0 — 2023-05-24

## README

<!--
 * @Description: 
 * @Author: taiyang
 * @Date: 2023-05-15 10:58:50
 * @LastEditTime: 2023-05-29 09:44:26
 * @LastEditors: taiyang
-->
# sz-directive
## 数政常用指令

###### 下载

```vue
npm i sz-directive
```

###### 使用方式

```vue
import SzDirective from 'sz-directive'

Vue.use(SzDirective)
```

###### 按需要引入方式

```vue
import { tooltip } from 'sz-directive'

Vue.directive('tooltip', tooltip);
```

---

###### vue项目使用

```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 | 传入变量  | 监听变量值，检测是否超出边界 |


---

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

---
_Source: https://npm.io/package/sz-directive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._