@develop-plugins/directive v0.0.5

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>

v-slide

v-slide 指令提供了一个简单的滑动切换功能，可以实现元素的滑动显示和隐藏效果。

参数配置说明

/***
 * @param {Object} binding.value。
 * @param {Object} config
 * @param {'left'|'right'|'up'} [config.direction] 滑动方向
 * @param {Number} [config.offset=100]- 滑动距离
 * @param {Number} [config.duration=800] 动画时长
 * @param {String} [config.easing] 动画缓动函数
*/

使用示例：

<template>
    <div v-slide="{ duration: 100, direction: 'right', duration: 300 }">滑动切换</div>
</template>

<script lang="ts" setup>
</script>