vthing v0.2.1

vthing

一个普普通通的vue3自定义工具集.

安装

$ npm install vthing
or
$ yarn add vthing
or
$ pnpm add vthing

例子

在 main.js中引入

import {inputNumber,inputDigit} from "vthing"

注册自定义指令

const app = createApp(App)

// 需要在实例挂载之前注册
app.directive("input-number", inputNumber)
app.directive("input-digit", inputDigit)

app.mount('#app')

指令

v-input-number

限制用户输入除数字之外的任意字符

引入

import {inputNumber} from "vthing"
app.directive("input-number", inputNumber)

使用

<input v-input-number v-model="value" />

v-input-digit

限制用户输入除正数和小数之外的任意字符

引入

import {inputDigit} from "vthing"
app.directive("input-digit", inputDigit)

使用

// 默认为只允许输入正整数
<input v-input-digit v-model="value" />
// 限制用户输入的小数位，绑定值为数字类型
<input v-input-digit="2" v-model="value" />

v-input-reg

用于限制匹配字符的输入

引入

import {inputReg} from "vthing"
app.directive("input-reg", inputReg)

使用

// 限制除 0-9 之外的字符输入
// 绑定值必填，类型为RegExp
<input v-input-reg="/[^0-9]/g" v-model="value" />

v-permission

元素级权限管理指令

引入

import {permission} from "vthing"
// 初始化阶段需要传入用户所有的权限，string[] 类型
const access = permission(["auth1","auth2"])
app.directive("permission", access)

使用

// 绑定值不在权限中，dom元素将被移除
// 可传入字符串或数组
<input v-permission="'auth1'" v-model="value" />
<input v-permission="['auth1']" v-model="value" />

组合式函数

useLazyState

引入

import {useLazyState} from "vthing

使用

// 当 count 被使用时，自动请求第一个参数，将结果缓存起来，再次使用count就会直接使用缓存结果
// 第二个参数为默认值
const count = useLazyState(async ()=>{},"123")
console.log(count)

感谢你的使用 ❤️❤️❤️