leprechaun-vue

自定义指令

• vue2

import { fnDirectiveRegister } from "leprechaun-vue";
fnDirectiveRegister(Vue);

• vue3

import { createApp } from "vue";
import App from "./App.vue";
import { fnDirectiveRegister } from "leprechaun-vue";
const app = createApp(App);
fnDirectiveRegister(app);
app.mount("#app");

v-focus

• 自动聚焦

<input v-focus placeholder="请输入" />

v-waterMarker

• 水印

<div
  class="section-body"
  v-waterMarker="{
      text: '福建龙腾大数据信息技术有限公司版权所有',
      textColor: '#1890ff',
      font: '12px',
    }"
></div>

v-longPress

• 长按触发事件

<button v-longPress="onClick">longPress测试按钮</button>

v-debounce

• 防抖

<button v-debounce="onClick">debounce测试按钮</button>

v-throttle

• 节流

<button v-throttle="onClickThrottle">throttle测试按钮</button>

v-emoji

• 禁止输入表情和特殊字符

<input v-emoji placeholder="请输入" />

v-lazyLoad

• 只加载浏览器可见区域的图片

<div
  class="panel-scroll"
  style="
        display: flex;
        height: 600px;
        overflow-y: auto;
        flex-direction: column;
      "
>
  <img v-lazyLoad="require('./assets/logo.png')" />
  <img style="margin-top: 1000px" v-lazyLoad="require('./assets/logo.png')" />
</div>

v-permission

• 对需要权限判断的 Dom 进行显示隐藏

<button v-permission="'1'">权限测试button</button>

v-draggable

• 拖拽元素

<button v-draggable style="position: absolute">拖拽测试button</button>