vue3-directive-plug

你的 工具箱

开箱即可用的 指令\utils， 说明：vue3-directive 是一个方便在 Vue 3 + Ts 项目中快速使用的指令 npm 插件。它允许您轻松地在项目中添加多种功能，它采用 Ts 方式开发，与 Vue3 更加搭配

🌍 安装

npm install vue3-directive-plug

说明：

此工具库是基于 Element-plus、Sass、Node、Ts，请您在安装以上依赖后使用此辅助库，它可帮您快速开发功能、您只需使用 v-xx="" ；

🛹 指令 使用方法

在你的主应用程序入口文件（例如 main.js）中，导入并使用 directive ：

import { directive } from "vue3-directive-plug";
app.use(directive).mount("#app");

copy

v-copy="data"

<template>
	<div class="card content-box">
		<span class="text">复制指令 🍇🍇🍇🍓🍓🍓</span>
		<div class="box-content">
			<el-input placeholder="请输入内容" v-model="data" style="width: 500px">
				<template #append>
					<el-button v-copy="data">复制</el-button>
				</template>
			</el-input>
		</div>
	</div>
</template>

<script setup lang="ts" name="copyDirect">
import { ref } from 'vue';
const data = ref<string>('我是被复制的内容 🍒 🍉 🍊');
</script>

debounce

v-debounce="debounceInput"

  <el-input
	v-debounce="debounceInput"
	v-model.trim="iptVal"
	placeholder="防抖输入框 (0.5秒后执行)"
	style="width: 100%"
 />

draggable

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>

longpress

v-longpress="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" name="longpressDirect">
import { ElMessage } from 'element-plus';
const longpress = () => {
	ElMessage.success('长按事件触发成功 🎉🎉🎉');
};
</script>

throttle

v-throttle="throttleClick"

<template>
	<div class="card content-box">
		<span class="text">节流指令 🍇🍇🍇🍓🍓🍓</span>
		<el-button type="primary" v-throttle="throttleClick"
			>节流按钮 (每隔1S秒后执行)</el-button
		>
	</div>
</template>

<script setup lang="ts" name="throttleDirect">
import { ElMessage } from 'element-plus';
const throttleClick = () => {
	ElMessage.success('我是节流按钮触发的事件 🍍🍓🍌');
};
</script>

waterMarker

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

🛹 utils\工具 使用方法

debounceRest

import { debounceRest } from "vue3-directive-plug";

<el-button @click="handClick('我是参数')">首页</el-button>

import { debounceRest } from "vue3-directive-plug";

const handClick = debounceRest((varStr: string) => {
	console.log("！这里输出防抖 🚀 ==>：", varStr);
}, 250);