Mint UI 調(diào)色板按鈕-Palette Button

2021-09-06 15:14 更新
調(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 按鈕開始收起


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號