vue3 directives 自定义指令库

v3-directives vue3自定义指令库

##码云地址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 v-copy

使用：给 Dom 加上 v-copy 及复制的文本即可

<template> <button v-copy="copyText">复制</button> </template> <script> export default { data() { return { copyText: "a copy directives", }; }, }; </script> v-RealImg

使用：给 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> v-longpress

使用：给 Dom 加上 longpress:[1000] 及回调函数即可,可传时间，单位 ms

<template> <button v-longpress:[1000]="longpress">长按</button> </template> <script> export default { methods: { longpress () { alert('长按指令生效') } } } v-debounce

使用：给 Dom 加上 v-debounce 及回调函数即可

<template> <button v-debounce="debounceClick">防抖</button> </template> <script> export default { methods: { debounceClick () { console.log('只触发一次') } } } v-emoji

使用：将需要校验的输入框加上 v-emoji 即可 只能输入数字字母汉字

<template> <input type="text" v-model="note" v-emoji /> </template> v-input:type

使用：type 值： 'number'：数字类型, 'decimal'：数字加小数, 'decimal_2'：数字加 2 位小数, 'customize'：自定义正则，允许你通过 data-rule= 传递一个自定义的正则表达式

<template> <input v-input:customize="inputValue" data-rule="/[^\d]/" v-model="inputValue" /> </template> v-LazyLoad

使用，将组件内 标签的 src 换成 v-LazyLoad

<img v-LazyLoad="xxx.jpg" /> v-permission

使用：给 v-permission 赋值判断即可

<div class="btns"> <!-- 显示 --> <button v-permission="'1'">权限按钮1</button> <!-- 不显示 --> <button v-permission="'10'">权限按钮2</button> </div> v-waterMarker

使用，设置水印文案，颜色，字体大小即可

<template> <div v-waterMarker="{text:'wqs版权所有',textColor:'rgba(180, 180, 180, 0.4)'}" ></div> </template> v-draggable

使用: 在 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> v-ellipsis

使用: 在 Dom 上加上 v-ellipsis:100,参数 width

<template> <div v-ellipsis:100> 需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本 </div> </template> v-hide-text

支持三种修饰符 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> v-format-text

支持传入指定的绑定值，参数和修饰符 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> v-collapse

支持传入指定的绑定值，参数 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> v-backTop

使用: 在 Dom 上加上 v-backTop

<button v-backTop style="position:fixed;bottom:20px;right:20px">top</button>