iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0

下方的彈出選單 Action Sheet

Action Sheet

這是一個從螢幕下方彈跳出小選單的元件

在Android及iOS上也都有類似的原生元件

不過如果想在網頁也做一個類似的

用我們quasar就不用額外再自己刻啦

material

https://ithelp.ithome.com.tw/upload/images/20181104/20111805BNIzgloU38.png

iOS

https://ithelp.ithome.com.tw/upload/images/20181104/20111805BsnAfRIjRh.png

引入

/quasar.conf.js

plugins 形式

framework: {
  plugins: ['ActionSheet']
}

components 形式

framework: {
  components: ['QActionSheet']
}

作為 Plugins 的使用方法

由於有時候會在vuex等等不是頁面的地方使用到

這邊quasar就有提供在vue內及vue外的使用方法

Vue 內

this.$q.actionSheet(configObj)

Vue 以外

import { ActionSheet } from 'quasar'
ActionSheet.create(configObj)

configObj

在這個object內設定這個actionSheet要顯示的字及功能,詳細看下方範例

範例

this.$q.actionSheet({
  title: '選擇操作', //標題,
  grid: true, //使用格狀排版 (一排三個),
  dismissLabel: '取消', //取消按鈕的文字  只有iOS主題下可用 預設是Cancel
  actions:[
    {
      label:'抓蟲',
      color: 'green', // icon的顏色 
      icon: 'fas fa-bug', //顯示的icon
      //avatar: 'statics/demo.jpg', //如果要用圖片的話,不能跟icon一起用
      handler(){
        //放要執行的function
        console.log('抓蟲大師4 ni !')
      }
    },
    {
      label:'分享到FB',
      color: 'blue',
      icon: 'fab fa-facebook-square'
    },
    {
      label:'付錢了事',
      color: 'black',
      icon: 'fab fa-apple-pay'
    },
    // {
    //   label: '派遣狙擊手',
    //   color: 'red',
    //   icon: 'fas fa-crosshairs'
    // }
  ]
})
.then(action => {
 //	按了某個按鈕
})
.catch(()=>{
//	按了取消或是關閉視窗
})

格線的效果

https://ithelp.ithome.com.tw/upload/images/20181104/20111805ijxGg30i7C.pnghttps://ithelp.ithome.com.tw/upload/images/20181104/20111805eWiTbCIdJl.png

不想用Promise的同學可以用async

這裡我直接拿官方的範例

async showActionSheet () {
  try {
    const action = await this.$q.actionSheet({...})

    // user picked an action at this point
    console.log(action)
    // { label: 'Joe', ... }
  }
  catch () {
    // user dismissed Action Sheet
  }
}

作為 Component 的使用方法

跟上面的操作基本上是一樣
只是能夠多監聽@show@hide事件

範例

<q-action-sheet
  v-model="model"
  title="下班後要做什麼"
  :actions="[
    { label:'回家睡覺', icon:'fas fa-home'},
    { label:'去居酒屋', icon:'fas fa-cocktail'},
    { label:'去逛書店', icon:'fas fa-book'}
  ]"
/>

https://ithelp.ithome.com.tw/upload/images/20181104/201118054G6uu2YQbO.png

事件

  • @ok 點選選項時觸發
  • @cancel 取消時觸發
  • @show 顯示時觸發
  • @hide 隱藏時觸發
  • @escape-key 按ESC時觸發

上一篇
[Day 20] Vue Quasar 表單元件 9 - Knob (旋轉鈕?)
下一篇
[Day 22] Vue Quasar 彈跳視窗 2 - Dialog
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言