添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
不爱学习的甘蔗  ·  首届CCF ...·  1 年前    · 
性感的西装  ·  CSS reference guide ...·  1 年前    · 

就用這個取代傳統alert吧

Dialog

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')})