@develop-plugins/directive v0.0.4

Directive

描述

提供一些常用的vue指令。

安装

 # npm
 npm i @develop-plugins/directive
 
 # yarn
 yarn add @develop-plugins/directive
 
 # pnpm
 pnpm add @develop-plugins/directive

引用

import directive from '@develop-plugins/directive';
app.use(directive);

v-debounce

防抖指令。

<template>
    <button v-debounce="handleClick">测试</button>
</template>

v-copy

复制指令。

<template>
    <button v-copy="复制信息">测试</button>
</template>

v-draggable

可拖拽指令。

<template>
    <div v-draggable>拖拽</div>
</template>

v-ob-resize

观察DOM元素大小变化指令。

<template>
    <div v-ob-resize="handleResize">观察属性大小变化</div>
</template>
<script lang="ts" setup>
    function handleResize(rect) {
        // 返回的dom getBoundingClientRect()位置信息
        console.log('rect', rect);
    }
</script>

v-click-outside

当在目标元素外点击鼠标时，v-click-outside 指令会调用函数。

参数配置说明

/***
* @param {Object | Function} binding.value。binding.value可以为函数或者配置对象两种。
* binding.value 为配置对象。参数说明如下
* @param {Function} binding.value.handler 为点击事件回调 
* @param {Function} binding.value.closeConditional 为关闭条件，函数决定是否调用外部点击功能 
* @param {Array<HTMLElement>} binding.value.include 要包含的元素 
*/

<template>
    <div v-click-outside="binding">观察属性大小变化</div>
</template>

v-scroll

v-scroll 指令允许您在窗口、指定目标或元素本身( 使用.self 修饰符)滚动时提供回调。

<template>
    <div v-scroll>观察属性大小变化</div>
</template>