vuedir

vuedir

关于指令和插件，如果您还不了解，可以查阅创建您的第一个 Vue 自定义指令和制作您的第一个 Vue 插件。

features

• v-focus
• v-blur
• v-ripple
• v-clamp
• v-clipboard
• v-mask
• v-click-outside

Install

npm install vuedir
yarn add vuedir
pnpm install vuedir

Use API

import directive:

import Vue from 'vue'
import { vFocus } from '.vuedir'

const app = createApp()

app.use(vFocus)

focus

一种指令，它以单向方式将焦点绑定到表达式，这样当表达式为 truthy 时元素接收焦点，当表达式为 falsy 时元素失去焦点。

<input
  type="text"
  v-focus="focused"
  @focus="focused = true"
  @blur="focused = false"
/>

<script setup>
  import { ref } from 'vue'
  const focused = ref('focused')
</script>

Note：与 1.x 不同，在 Vue 2.0 中，指令会在每次主机组件重新启动时更新，而不仅仅是在指令表达式发生变化时。有时这可能是不可取的，尤其是对于“自动聚焦”用例。如果要模拟 1.x 行为，请在指令中添加 .lazy 修饰符，例如 v-focus.lazy="true"。

Note：表单元素并不是唯一能够获得焦点的元素。该列表还包括链接、设置了 tabindex 属性的元素以及将 contentEditable 设置为 true 的元素。

blur

Binding object attributes:

option	default	type
isBlurred	false	boolean
opacity	0.5	number
filter	'blur(1.5px)	' string
transition	'all .2s linear'	string

import:

import { vBlur } from 'vuedir'

// ...

app.use(vBlur)
// or
app.use(vBlur, {
  opacity: 0.2,
  filter: 'blur(1.2px)',
  transition: 'all .3s linear'
})

example:

<template>
  <!-- 示例 1：仅使用布尔值（使用默认值） -->
  <div v-blur="isBlurred"></div>

  <!-- 示例 2：使用对象（使用配置值） -->
  <div v-blur="blurConfig"></div>
</template>

<script setup>
  import { ref, reactive } from 'vue'

  const isBlurred = ref(true)
  const blurConfig = reactive({
    isBlurred: false,
    opacity: 0.3,
    filter: 'blur(1.2px)',
    transition: 'all .3s linear'
  })
</script>

v-ripple

import:

import { vRipple } from 'vuedir'

// ...

app.use(vRipple)
// or
app.use(vRipple, {
  color: 'rgba(255, 255, 255, 0.35)',
  zIndex: 55
})

example:

<div v-ripple>This is a button</div>
<!-- or -->
<div v-ripple="'rgba(255, 255, 255, 0.35)'">I have different color</div>

v-clamp

import:

import { vClamp } from 'vuedir'

// ...

app.use(vClamp)
// or
app.use(vClamp, {
  truncationChar: '✂️'
})

example:

<p v-clamp="'3'">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, ipsa
  officiis. Natus, voluptatem reiciendis dolores culpa dignissimos minus in
  mollitia doloremque harum quia impedit recusandae commodi ea ipsam. Nulla,
  sint.
</p>
<!-- or -->
<div v-clamp="'60px'">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, ipsa
  officiis. Natus, voluptatem reiciendis dolores culpa dignissimos minus in
  mollitia doloremque harum quia impedit recusandae commodi ea ipsam. Nulla,
  sint.
</div>

v-click-outside

import:

import { vClickOutside } from 'vuedir'

// ...

app.use(vClickOutside)

example:

<script setup>
  import { reactive } from 'vue'

  const vcoConfig = reactive({
    handler: this.handler,
    middleware: this.middleware,
    events: ['dblclick', 'click'],
    isActive: true,
    detectIFrame: true,
    capture: false
  })

  const onClickOutside = (event) => {
    console.log('Clicked outside. Event: ', event)
  }

  const handler = (event) => {
    console.log('Clicked outside (Using config), middleware returned true :)')
  }

  const middleware = (event) => {
    return event.target.className !== 'modal'
  }
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-click-outside="vcoConfig"></div>
</template>

v-mask

该指令使用 inputmask 进行包装：

import:

import { vInputmask } from 'vuedir'

// ...

app.use(vInputmask)

example:

<input type="text" v-mask="'99/99/9999'" />
<input
  type="text"
  v-mask="{mask: '99/99/9999', greedy: true}"
  @change="maskCheck"
/>

<script setup>
  const maskCheck = (field) => {
    if (field.target.inputmask.isComplete()) {
      console.log('is Complete')
    } else {
      console.log('is Incomplete')
    }
  }
</script>

v-clipboard

import:

import { Clipboard } from 'vuedir'
// ...
app.use(Clipboard)

单击包含 v-clipboard 指令的元素时，value 将复制 的值到剪贴板。

复制静态值（指令应该接收实际值）：

<button v-clipboard="value">Copy to clipboard</button>

复制动态值（指令应该接收一个返回值的函数）：

<button v-clipboard="() => value">Copy to clipboard</button>

在您的方法中复制任何内容：

this.$clipboard(value)

事件：

<button
  v-clipboard="foo"
  v-clipboard:success="clipboardSuccessHandler"
  v-clipboard:error="clipboardErrorHandler"
>
  Copy to clipboard
</button>

<script setup>
  const clipboardSuccessHandler = ({ value, event }) => {
    console.log('success', value)
  }

  const clipboardErrorHandler = ({ value, event }) => {
    console.log('error', value)
  }
</script>

License

MIT License © 2022 lio-zero