0.0.14 • Published 2 years ago
vuedir v0.0.14
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>