vue-directives-lib

🚀Useful custom directives for vue

Eenglish | 中文

• Preview

📦 Installation

npm install vue-directives-lib
or
pnpm add vue-directives-lib
or
yarn add vue-directives-lib

🦄 Usage

• Global import

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import vueDirectives from "vue-directives-lib";

const app = createApp(App);
app.use(vueDirectives);
app.mount("#app");

• Local import

// test.vue
<template>
  <div
    v-copy="{
      copyValue,
      callback: callbackCopy
    }"
  >
    {{ copyValue }}
  </div>
  <button btn @click="changeVal">
    改变值
  </button>
</template>

<script lang="ts" setup>
import { copy as vCopy } from "vue-directives-lib";
const copyValue = ref("点击我复制内容");
const callbackCopy = arg => {
  console.log('🐳-----arg-----', arg);
};
const changeVal = () => {
  copyValue.value = "改变后的值" + Math.random();
};
</script>

🐳 Function list

Directive name	Description	Parameter	Usage
v-copy	Copy text content	{copyValue,callback}	v-copy="'复制的内容'"
v-tooltip	When the text overflows, display all content around the element	{offset:10}	v-tooltip={offset:10}
v-longpress	longpress func	{callback:()=>{}}	v-longpress
v-hidden	to hide the element	--	v-hidden="true"
v-typed	typed text	{value: string, loop: true}	v-typed="text"
v-ellipsis	ellipsis text	{rows: 1,content: string}	v-ellipsis="1"