Mint UI参考手册
JS组件 | JS Components
调色板按钮 | Palette Button
调色板按钮
引入
import { PaletteButton } from 'mint-ui';
Vue.component(PaletteButton.name, PaletteButton);
例子
基本用法
<mt-palette-button content="+">
<div class="my-icon-button"></div>
<div class="my-icon-button"></div>
<div class="my-icon-button"></div>
</mt-palette-button>
设置参数和事件,以及手动触发事件
methods: {
main_log(val) {
console.log('main_log', val);
},
sub_log(val) {
console.log('sub_log', val);
this.$refs.target_1.collapse();
}
}
<mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"
direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"
style="left:30px;">
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
</mt-palette-button>
选项
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
content |
主按钮内容 |
String |
||
offset |
角度偏移量 |
Number |
Math.PI / 4 |
|
direction |
按钮展开方向 |
string |
lt, t, rt, r, rb, b, lb, l |
lt |
radius |
按钮展开半径 |
Number |
90 |
|
mainButtonStyle |
主按钮样式 |
String |
方法
方法名 |
说明 |
---|---|
toggle |
切换按钮展开/收起状态 |
expand |
展开按钮 |
collapse |
收起按钮 |
事件
事件名 |
说明 |
---|---|
expand |
按钮开始展开 |
expanded |
按钮完全展开(动画效果执行结束) |
collapse |
按钮开始收起 |