BIN-UI-DESIGN组件指令
组件提供了四个指令用于完成组件功能,如果组件是全局引入则会自动注册.如采用自动引入或者按需加载,则需要手动进行引入和注册.
typescript
// main.ts
import { createApp } from 'vue'
import {
create,
// 外部点击指令
ClickOutside,
// 点击动画
ClickAnimation,
// 水波纹指令
Waves,
// 重复点击
RepeatClick
} from 'bin-ui-design'
const UI = create({
directives: [ClickOutside, ClickAnimation, Waves, RepeatClick]
})
const app = createApp()
app.use(UI)
app.mount('#app')// main.ts
import { createApp } from 'vue'
import {
create,
// 外部点击指令
ClickOutside,
// 点击动画
ClickAnimation,
// 水波纹指令
Waves,
// 重复点击
RepeatClick
} from 'bin-ui-design'
const UI = create({
directives: [ClickOutside, ClickAnimation, Waves, RepeatClick]
})
const app = createApp()
app.use(UI)
app.mount('#app')点击动画指令
在标签中追加v-click-animation指令增加点击动画指令，波纹颜色根据border或background颜色创建
水波纹指令
在标签中追加v-waves指令增加水波纹指令,指令可以设置波纹颜色和点击方式, 注意，增加水波纹指令会默认覆盖原有的按钮点击效果
html
<b-button v-waves>默认指令</b-button>
<b-button v-waves="'rgba(255,162,211,0.5)'">设置颜色</b-button><b-button v-waves>默认指令</b-button>
<b-button v-waves="'rgba(255,162,211,0.5)'">设置颜色</b-button>重复点击指令
可以按住进行重复点击,组件中在数字输入框使用到.按住增加
ClickOutside 外部点击指令
通过添加v-click-outside="clickOutside"来添加外部点击事件 常用于popper的外部点击关闭.