1 Star 0 Fork 0

skrey / v-directives

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

点击查看详细文档

vDirectives vue3

下载

  npm install @skrey/v-directive

指令

  • v-debounce 防抖指令
  • v-throttle 节流指令
  • v-async 同步指令
  • v-preview 预览指令
  • v-focus 聚焦指令

使用

全量使用

import vDirectives from '@skrey/v-directive'

// createApp

app.use(vDirectives)

部分使用

import { customVDirective } from '@skrey/v-directive'

// createApp

customVDirective(app, {
  useDirectives: ['async', 'preview']
})

指定别名

import { customVDirective } from '@skrey/v-directive'

// createApp

customVDirective(app, {
  useDirectives: ['async', 'preview'],
  alias: {
    preview: 'p', // 使用 v-p 代替 v-preview
    throttle: 't' // 使用 v-t 代替 v-throttle
  }
})

指令使用

v-debounce 防抖指令

在一定时间间隔内重复发起调用,则取消前一次调用

<template>
  <div v-debounce="changeBg">点击切换背景</div>
</template>

<script lang="ts" setup>
const changeBg = () => {
  // 切换背景
}
</script>

几点注意:

  • 默认事件 click
  • 默认防抖时间 300ms

更复杂的使用(修饰符和 vue 保持一致)

<div v-debounce:contextmenu-500.prevent="changeBg">点击切换背景</div>
// 表示绑定 contextmenu 事件, 防抖时长500ms并且阻止默认事件

<div v-debounce:click-resize-.prevent.stop="changeBg">点击切换背景</div>
// 表示绑定 click 事件和 resize 事件,使用默认防抖时长,并且阻止冒泡和默认事件

<div v-debounce:-1000.prevent.stop="changeBg">点击切换背景</div>
// 表示绑定默认的 click 事件,修改防抖时长为1000ms,并且阻止冒泡和默认事件

v-throttle 节流指令

以一定的频率发起调用

<template>
  <div v-throttle="update">点击更新</div>
</template>

<script lang="ts" setup>
const update = () => {
  // 更新
}
</script>

几点注意:

  • 默认事件 click
  • 默认节流时间 300ms

更复杂的使用(修饰符和 vue 保持一致)

<div v-throttle:contextmenu-500.prevent="update">点击更新</div>
// 表示绑定 contextmenu 事件, 节流时长500ms并且阻止默认事件

<div v-throttle:click-resize-.prevent.stop="update">点击更新</div>
// 表示绑定 click 事件和 resize 事件,使用默认节流时长,并且阻止冒泡和默认事件

<div v-throttle:-1000.prevent.stop="update">点击更新</div>
// 表示绑定默认的 click 事件,修改节流时长为1000ms,并且阻止冒泡和默认事件

v-async 同步指令

当调用返回结果后(无论结果如何)才能发起下一次调用

<template>
  <div v-async="getData">点击获取数据</div>
</template>

<script lang="ts" setup>
const getData = () => {
  // 获取数据
}
</script>

几点注意:

  • 默认事件 click
  • 默认休眠时间 0,可以设置调用成功(无论结果如何)之后多久可以再次发起调用

更复杂的使用(修饰符和 vue 保持一致)

<div v-async:contextmenu-500.prevent="getData">点击获取数据</div>
// 表示绑定 contextmenu 事件, 休眠时长500ms并且阻止默认事件

<div v-async:click-resize-.prevent.stop="getData">点击获取数据</div>
// 表示绑定 click 事件和 resize 事件,使用默认休眠时长,并且阻止冒泡和默认事件

<div v-async:-1000.prevent.stop="getData">点击获取数据</div>
// 表示绑定默认的 click 事件,修改休眠时长为1000ms,并且阻止冒泡和默认事件

v-preview 预览指令

用于图片预览

<template>
  <img
    class="w-20 h-20 rounded-lg"
    v-preview
    src="http://zwyznswwy.com:3000/public/website/home/images/bg2.webp"
  />
</template>

更复杂的使用:

<template>
  <img
    v-preview="{
      background: 'red',
      margin: 24
    }"
    src="http://zwyznswwy.com:3000/public/website/home/images/bg2.webp"
  />
</template>
// binding.value 为 preview 的配置选项

可设置的配置有:

 {
  margin: 24, // 缩放图像外边距
  background: '#BADA55', // 缩放图像的背景
  scrollOffset: 0, // 滚动以关闭缩放的距离
  container: '#zoom-container', // 指定缩放容器
  template: '#zoom-template', // 指定缩放模板
  useInstance: (instance:Zoom) => {}, // useInstance 帮助我们拿到实例做进一步的处理
}

默认配置

{
  margin: 24,
  background: 'rgba(0,0,0,.3)',
  scrollOffset: 0,
  useInstance: () => {}
}

实例方法(部分)

instance.open() // 在调用 open 方法时立即触发。
instance.opened() // 在缩放完成动画后触发。
instance.close() // 在调用 close 方法时立即触发。
instance.toggle() // 打开时关闭,关闭时打开。
instance.closed() // 在缩小完成动画后触发。
instance.detach() // 在调用 detach 方法时触发。
instance.update() // 在调用 update 方法时触发。

instance.on('open', function (event) {
  console.log('Image is zoomed in', event)
})

点击前往 medium-zoom

v-focus 聚焦指令

让页面的输入框自动聚焦

  • 对于 input 下列属性将起作用 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'datetime'
  • 对于 textarea 没有特殊要求

修饰符

  • global 开启全局查找
  • autoFind 自动查找

注意 类选择器 . 使用 -v-代替,例如 v-focus:-v-className

// 简单使用
<template><input v-focus /> // 聚焦</template>

// 指定选择器 -- 在 input 或者 textarea 上 则不起作用
<template><input v-focus:#text /> // 聚焦</template>

// 指定选择器 -- 将寻找id = 'text' 的元素并使其聚焦,如果选择的为不可聚焦元素,则无效果,
开启自动查找可以聚焦符合条件的第一个
<template>
  <div v-focus:#text><input /> // 无效果</div>
</template>

// 指定选择器 -- 将全局寻找id = 'text' 的元素并使其聚焦,如果选择的为不可聚焦元素,则无效果,
开启自动查找可以聚焦符合条件的第一个
<template>
  <input id="text" /> // 聚焦
  <div v-focus:#text.global>
    <input />
  </div>
</template>

// 配合 autoFind
<template>
  <input id="text1" />
  <div v-focus:#text.global.autoFind><input /> // 聚焦</div>
</template>

Empty file

About

No description expand collapse
TypeScript and 3 more languages
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/skrey/v-directives.git
git@gitee.com:skrey/v-directives.git
skrey
v-directives
v-directives
master

Search

344bd9b3 5694891 D2dac590 5694891