調(diào)色板按鈕
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>
設(shè)置參數(shù)和事件,以及手動觸發(fā)事件
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>
參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
content | 主按鈕內(nèi)容 | String | ||
offset | 角度偏移量 | Number | Math.PI / 4 | |
direction | 按鈕展開方向 | String | ?lt ?, ?t ?, ?rt ?, ?r ?, ?rb ?, ?b ?, ?lb ?, ?l ? |
lt |
radius | 按鈕展開半徑 | Number | 90 | |
mainButtonStyle | 主按鈕樣式 | String |
方法名 | 說明 |
---|---|
toggle | 切換按鈕展開/收起狀態(tài) |
expand | 展開按鈕 |
collapse | 收起按鈕 |
事件名 | 說明 |
---|---|
expand | 按鈕開始展開 |
expanded | 按鈕完全展開(動畫效果執(zhí)行結(jié)束) |
collapse | 按鈕開始收起 |
更多建議: