##码云地址https://gitee.com/wqs99/v3-directives
- 安装依赖
npm install v3-directives --save
- 注册指令
import VueDirectives from "v3-directives";
const app = createApp(App);
app.use(router).mount("#app");
app.use(VueDirectives);基于 vue 的自定义指令集合，包含
- 复制粘贴指令 v-copy
- 图片出错时可使用默认图片 v-RealImg
- 长按指令 v-longpress
- 防抖指令 v-debounce
- 禁止表情及特殊字符 v-emoji
- 限制输入框类型，可传正则 v-input:type
- 图片懒加载 v-LazyLoad
- 权限校验指令 v-premission
- 实现页面水印 v-waterMarker
- 拖拽指令 v-draggable
- 文字超出宽度隐藏 v-ellipsis
- 拖拽指令 v-hide-text
- 展开收起 v-collapse
- 返回顶部 v-backTop
使用：给 Dom 加上 v-copy 及复制的文本即可
<template>
<button v-copy="copyText">复制</button>
</template>
<script>
export default {
data() {
return {
copyText: "a copy directives",
};
},
};
</script>使用：给 Dom 加上 v-RealImg
<template>
<img v-RealImg="'images/logo.png'" src="images/errorLogo.png" />
</template>
<script>
export default {
data() {
return {
copyText: "a copy directives",
};
},
};
</script>使用：给 Dom 加上 longpress:[1000] 及回调函数即可,可传时间，单位 ms
<template>
<button v-longpress:[1000]="longpress">长按</button>
</template>
<script>
export default {
methods: {
longpress () {
alert('长按指令生效')
}
}
}使用：给 Dom 加上 v-debounce 及回调函数即可
<template>
<button v-debounce="debounceClick">防抖</button>
</template>
<script>
export default {
methods: {
debounceClick () {
console.log('只触发一次')
}
}
}使用：将需要校验的输入框加上 v-emoji 即可 只能输入数字字母汉字
<template>
<input type="text" v-model="note" v-emoji />
</template>使用：type 值： 'number'：数字类型, 'decimal'：数字加小数, 'decimal_2'：数字加 2 位小数, 'customize'：自定义正则，允许你通过 data-rule= 传递一个自定义的正则表达式
<template>
<input
v-input:customize="inputValue"
data-rule="/[^\d]/"
v-model="inputValue"
/>
</template>使用，将组件内 标签的 src 换成 v-LazyLoad
<img v-LazyLoad="xxx.jpg" />使用：给 v-permission 赋值判断即可
<div class="btns">
<!-- 显示 -->
<button v-permission="'1'">权限按钮1</button>
<!-- 不显示 -->
<button v-permission="'10'">权限按钮2</button>
</div>使用，设置水印文案，颜色，字体大小即可
<template>
<div
v-waterMarker="{text:'wqs版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"
></div>
</template>使用: 在 Dom 上加上 v-draggable,传 id 即在父级内部拖拽，不传则在可视区域
<div
id="draggableBox"
style="width: 500px;height:500px;border:1px solid red;margin: 100px 0 0 300px"
>
<div
v-draggable:draggableBox
style="width:100px;height:100px;background:red;"
></div>
</div>使用: 在 Dom 上加上 v-ellipsis:100,参数 width
<template>
<div v-ellipsis:100>
需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本
</div>
</template>支持三种修饰符 name：两个字隐藏后一个，两个字以上隐藏中间（默认）； mobile：手机号码，展示前 3 后 4； idcard：身份证，展示前 6 后 4 使用: 在 Dom 上加上 v-hide-text.name
<template>
<div v-hide-text.name>张三</div>
<!-- 张* -->
<div v-hide-text.name>张三丰</div>
<!-- 张*丰 -->
<div v-hide-text.mobile>13412345678</div>
<!-- 134****5678 -->
<div v-hide-text.idcard>422124199010101234</div>
<!-- 422124********1234 -->
</template>支持传入指定的绑定值，参数和修饰符 value 分隔符，默认为, arg 指令参数，默认为 3，每隔 3 个字符分割一次 modify 暂时只支持传入 money(金额千分位)
<template>
<div v-format-text.money=",">123456789</div>
<!-- 123,456,789 -->
<div v-format-text.money="_">123456789</div>
<!-- 123_456_789 -->
<div v-format-text.money:4=",">123456789</div>
<!-- 1234,4567,89 -->
<div v-format-text.money:4=",">123456789</div>
<!-- 1234,4567,89 -->
<div v-format-text>abcdefghi</div>
<!-- abc,def,ghi- -->
</template>支持传入指定的绑定值，参数 open 展开时的高度 close 收起时的高度 icon 展开收起图标，必传
<template>
<div
v-collapse="{open:'200px',close:'43px',icon:'iconfont icon_global_ArrowDown'}"
style="width:200px;margin:0 auto"
>
<div class="box"></div>
</div>
</template>使用: 在 Dom 上加上 v-backTop
<button v-backTop style="position:fixed;bottom:20px;right:20px">top</button>