就用這個取代傳統alert吧
Quasar的dialog也是做得跟手機原生的很像,一樣也是material及iOS兩種風格喔。基本上裡面除了放文字及按鈕外,還可以放輸入框、Radio、Checkbox等等的元件,就讓我們來看看吧!
一樣是分成plugins跟components兩種引入方式及用法
作為 Plugins 的使用方法
framework: {
plugins: ['Dialog']
Vue 內的使用方法
this.$q.dialog(configObj)
Vue 以外的使用方法
import { Dialog } from 'quasar'
Dialog.create(configObj)
this.$q.dialog({
title: '選擇主菜', //標題
message: '主廚精心特製主餐請選擇', //內文
color: 'red-13', //元件的顏色,這邊設為紅色red-13
ok: true, //是否顯示ok按鈕
cancel: true, //是否顯示cancel按鈕
// preventClose: true, //設定為true的話,除非按cancel或是ok不然都不會關閉視窗
// noBackdropDismiss: false, //按空白的地方不會關閉視窗,如果有用preventClose會自動填true
// noEscDismiss: false, //按ESC不會關閉視窗,如果有用preventClose會自動填true,
// stackButtons: false, //為true時會將ok,cancel按鈕垂直排列
// position: 'top', //(選填)設置視窗顯示的位置
//若要使用input的話
// prompt: {
// model: '頂級和牛帝王蟹', // Input內預設的字
// type: 'text' // Input的type 有text, textarea, email, tel, number, password, url, search
// },
//若要使用option的話
options: {
type: 'radio',//還有 checkbox, toggle,
model: 'beef', //預選的選項,
items: [
{ label:'絕對不加熱生牛排', value:'beef' },
{ label:'極地冰山沙漠鮪魚', value:'tuna' },
{ label:'超級漆黑山洞野豬肉', value:'pork' },
.then(res => { console.log(res) })
.catch(()=>{ console.log('cancel')})