vue3-directives-bens v1.0.1

这是一个基于 Vue3&TS&elementui-Plus 的自定义指令库与 hooks 库

安装方式：

npm install vue3-directives-bens -D
yarn add vue3-directives-bens -D
pnpm install vue3-directives-bens -D

使用方式：

import { directives } from "vue3-directives-bens";
app.use(directives);

功能

v-copy 一键复制

<template>
  <el-button v-copy="data">复制</el-button>
</template>

v-debounce 防抖

<template>
  <el-button v-debounce="{ input: handleInput, blur: handleBlur, click: handleClick, change: handleChange, clear: handleClear }">
    防抖
  </el-button>
</template>

v-throttle 节流

<template>
   <div>
     <el-button type="primary" v-throttle="throttleClick">节流按钮 (每隔1S秒后执行)</el-button>
   </div>
</template>
<script setup lang="ts">
  import { ElMessage } from "element-plus";
  const throttleClick = () => {
      ElMessage.success("我是节流按钮触发的事件");
  };
</script>

v-disable-button 禁用按钮

点击后需要禁用多久，才能再次点击

<template>
   <button v-disable-button:delay="1000">Click me</button> <!-- 延迟时间为 1000ms -->
</template>

v-draggable 拖拽

示例

<template>
  <div class="content-box">
      <span class="text">拖拽指令</span>
      <div v-draggable class="drag-box cursor-move">我可以拖拽的</div>
 </div>
</template>
<style lang="scss" scoped>
.content-box {
position: relative;//required
width: 500px;
height: 500px;
border: 1px solid #ccc;
.drag-box {
position: absolute;//required
width: 100px;
height: 100px;
background-color: #ccc;
    }
}
</style>

v-emoji 输入内容的限制

比如不能输入表情和特殊字符，只能输入数字或字母等。 v-emoji 或 v-emoji="'!@$%^&*()_+-=[]{}|;:,.<>?/'"

<template>
   <div>
     <input type="text" v-emoji="'!@$%^&*()_+-=[]{}|;:,.<>?/'">
   </div>
</template>

v-longpress 长按事件

<template>
  <div class="card content-box">
    <span class="text">长按指令</span>
    <el-button type="primary" v-longpress="longpress">长按2秒触发事件</el-button>
  </div>
</template>

<script setup lang="ts">
 import { ElMessage } from "element-plus";
 const longpress = () => {
 ElMessage.success("长按事件触发成功");
};
</script>

v-permission 权限

<template>
  <div>
    <p v-permission="{ value: '1', array: ['1', '2', '3', '4'] }">
      Permission '1'
    </p>
    <p v-permission="{ value: '5', array: ['1', '2', '3', '4'] }">
      Permission '5'
    </p>
    <p v-permission="{ value: ['2', '3'], array: ['1', '2', '3', '4'] }">
      Permission '2' or '3'
    </p>
  </div>
</template>

v-spare 备用图片

// 监听img的error事件
// img加载错误后触发error事件，检验备用地址是否有效
// 如果备用有效，将备用地址赋值给img的src
 <img :src="imgScr" v-spare="spareImg" />

v-water-marker 水印

<div
  style="width: 100%"
  v-water-marker="{ text: 'bennettliang', font: '16px Microsoft JhengHei', textColor: '#000' }"
></div>

更多指令待开发