指令集合

说明

全局指令均可自动采用按需导入，用v-ey-[directiveName]

例如copy指令

// 常规情况
<template>
  <div>{{ copyData }}</div>
  <a-button v-copy="copyData">复制</a-button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { vCopy } from 'ey-admin';
const copyData = ref('这是要复制的内容');
</script>

// 自动按需导入 
<template>
  <div>{{ copyData }}</div>
  <!-- 无需import导入 纵享丝滑~ -->
  <a-button v-ey-copy="copyData">复制</a-button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const copyData = ref('这是要复制的内容');
</script>

TIP

为便于开发者在某些需要明确导入的情况下使用指令，以下示例依旧使用手动按需导入

v-ey-rotate 旋转

v-ey-rotate:[X|Y|Z]="[angele]"

<template>
  <a-button v-rotate:Z="15">绕Z轴旋转15度</a-button>
</template>
<script setup lang="ts">
import { vRotate } from 'ey-admin';
</script>

隐藏代码

v-ey-copy 复制

v-ey-copy.noMsg="[sourceData]"

<template>
  <div style="margin-bottom: 10px">{{ copyData }}</div>
  <a-button v-copy="copyData">复制</a-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { vCopy } from 'ey-admin';
const copyData = ref('这是要复制的内容');
</script>

隐藏代码

v-ey-debounce 防抖

v-ey-debounce:[time]="[functionName]"

<template>
  <a-space>
    <a-button v-debounce:200="debounceClick">debounce</a-button>
    <div>{{ num }}</div>
  </a-space>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { vDebounce } from 'ey-admin';
const num = ref(1);
function debounceClick() {
  num.value++;
}
</script>

隐藏代码