使用Quasar設計Material和IOS風格的響應式網站

時間 2019-11-09

標籤使用 quasar 設計 material ios 風格響應網站欄目 iOS 简体版

原文原文鏈接

GITHUB：使用Quasar設計旅遊網站
文章連接：使用Quasar設計Material和IOS風格的響應式網站

Quasar

Quasar是一款基於Vue.js開發的UI框架，可讓你輕鬆構建網站簡潔明快的界面，更重要的是它還能讓你輕鬆作好RWD（響應式網站設計），除此以外還能幫助你加上PWA，使你的網頁變成手機上的App。javascript

如下內容來自官網Quasar Framework，歸納了Quasar的主要特色。css

Quasar是MIT許可的開源框架（基於Vue），可幫助Web開發人員建立：html

響應式網站
PWA
經過Apache Cordova構建移動App
多平臺桌面應用程序（使用Electron）

選擇Quasar的5個理由

內建了Material及IOS兩種主題
組件均內建RWD快速響應
多樣的基礎UI組件庫
自帶了Vuex、VueRouter、Vuei18n（多國語系）
強大的部署工具

安裝指南

首先安裝Node.js和vue-cli，具體安裝方法查看官網資料。vue

而後安裝Quasar，npm install -g quasar-cli。java

最後搭建項目：quasar init <folder name>webpack

取代main.js的quasar.config.js設置文件：git

引用Quasar內建的組件，能夠不用在每一個地方import components
i18n設置多國語系
icons移除註釋便可使用
開發模式下的HTTPS以及port設置
CSS動畫設置
其餘外部插件的設置
PWA、manifest等設置

`quasar.config.js`

plugins

之前在Vue安裝其餘的plugin會在main.js裏引入，而在Quasar就會取代main.js成爲所有配置文件。github

css

CSS的引入都會放在這個文件，默認的位置/src/css，所需的CSS庫已經準備好，能夠直接使用。web

extra

這裏是設置是否引入quasar-extras的內容。ajax

Package	name	說明
Roboto Font	`roboto-font`	Material主題的建議字體
Roboto Font Latin Extended	`roboto-font-latin-ext`	Material主題的建議字體
Material Icons	`material-icons`	Material風格的`icon`
MDI (Material Design Icons)	`mdi`	Material風格的`icon`擴展
Font Awesome	`fontawesome`	自由選擇`icon`
Ionicons	`ionicons`	`ionicons`的`icon`
Animate.css	`animations`	網頁組件動畫

scopeHoiting

默認true，用來提高webpack運行時的性能

VueRouterMode

設置Vue Router的模式，有history、hash兩種值。

vueCompiler

包含兩種Vue的編譯模式vue runtime+compiler，默認只有runtime-only運行時編譯

gzip

使網站支持gzip的格式。

analyze

在build時會運行webpack-bundle-analyzer工具。

extractCSS

提取CSS到文件中。VueLoader

extendWebpack

在dev模式中服務器的設置。

https
port

設置成指定的port，當quasar在運行dev模式時，遇到相同的port時會本身再+1。

open

是否在dev指令執行完成後，自動開啓此網站的分頁在瀏覽器上。

Layout

quasar dev打開初始頁面，頁面的header和drawer都是在layout/MyLayout.vue裏。

一些經常使用的屬性：

屬性	取值	說明
`side`	`String`	有兩個值`left`，`right`，決定要出如今左邊仍是右邊
`overlay`	`Boolean`	設置側邊欄彈出時是擠壓`q-page-container`仍是直接蓋在上面
`content-style`	`Object`	設置側邊欄的CSS
`content-class`	`String/Object/Array`	設置側邊欄的`class`
`mini`	`Boolean`	把側邊欄縮小到只有`icon`

這裏的CSS要用 Object的方式傳入。

:content-style="{color: 'red'}"

旅遊網站-Header

演示項目：

Toolbar
ToolbarTitle
Button

<q-layout-header>
      <q-toolbar
        color="primary"
        text-color="primary"
        inverted>

        <q-toolbar-title>
          好玩旅遊網
          <div slot="subtitle">WeFunWeb</div>
        </q-toolbar-title>
        <div class="gt-xs">
          <q-btn class="q-mr-md" flat>精選景點</q-btn>
          <q-btn class="q-mr-md" flat>美食地圖</q-btn>
          <q-btn class="q-mr-md" flat>夜宿曉行</q-btn>
          <q-btn class="q-mr-md" flat>夜宿曉行</q-btn>
          <q-btn class="q-mr-md" flat>註冊</q-btn>
          <q-btn class="q-mr-md" flat>登陸</q-btn>
        </div>
      </q-toolbar>
</q-layout-header>

Toolbar

color

Quasar內建色：color-palette

在/src/css/themes/common.variables.styl裏面增長調色板的顏色。

inverted

讓背景色變成白色，而後使原來白色的文字變成設置的背景色。

glossy

加上玻璃效果

QToolbarTitle

gt-xs

用來設置顯示像素高於576px的頁面樣式。

q-mr-md

mr等於margin-right
sm就是size的值爲small

其餘非外觀的功能屬性：

disable，:disable="true"時按鈕禁用
label設置按鈕的文字
type能夠是button、submit、reset其中一種
loading，值爲true顯示讀取中
percentage顯示讀取的圓圈，要跟loading一塊兒使用
dark-percentage用在亮色系的按鈕上

List&ListItem

修改Drawer

v-model="rightDrawerOpen"控制彈出側邊欄的位置
content-class="bg-grey-10"背景色
side="right"按鈕設置在多邊

設置了rightDrawerOpen須要加到data裏。

export default {
  name: 'MyLayout',
  data () {
    return {
      rightDrawerOpen: false
    }
  }
}

手機端按鈕

控制顯示的class用lt-sm只要像素小於sm(768px)就會顯示該區域。

設置List和`ListItem`

使用Dark屬性使得組件內容在暗色背景下更好顯示

List中可用組件，這些組件須要本身去配置文件中自行引入。

QListHeaderList上的標題
QItemSeparator分割線
QItem
QItemSide可分紅左右兩側的區塊
QItemMain中間的區塊
QItemTitle區塊中的標題

旅遊網站-Carousel頁面輪播

創建新的首頁

在src/pages/下新建Index文件夾，並在此文件夾下新建Index.vue做爲首頁，刪除原來的Index.vue文件。

修改Vue Router

在src/router/routers.js修改Index.vue的路徑。

創建輪播的區塊

在src/pages/Index下新建SectionCarousel.vue，並在Index.vue中引入。

而後再template下的q-page中加入section-carousel

<template>
  <q-page>
    <section-carousel></section-carousel>
  </q-page>
</template>

開始寫輪播

官方Carousel

在設置文件quasa.config.js中引入：

framework: {
  components: [
    'QCarousel',
    'QCarouselSlide',
    'QCarouselControl'
    ...
  ],
}

加入輪播的圖片/頁面

<template>
  <q-carousel
    color="white"
    infinite
    arrows
    autoplay
    height="400px"
  >
    <q-carousel-slide img-src="statics/images/papercut1.jpg"/>
    <q-carousel-slide img-src="statics/images/papercut2.jpg"/>
  </q-carousel>
</template>

加入文字區塊

Quasar在carousel中有個子組件QCarouselControl用來自定義按鈕在頁面上。

根據官方文檔的範例，QCarouselControl要放在QCarousel的最後面，也就是QCarouselSlide的後面。

<q-carousel-control
  position="center"
  slot="control-nav"
  slot-scope="carousel"
  class="carouselInput">
</q-carousel-control>

在q-carousel-control中加入內容：

<div class="main">
  <h6 class="title">新銳旅遊網站</h6>
  <p class="subtitle">您身邊的好玩專家</p>
  <p>發現周邊好玩的地方，玩得快樂，玩得精彩。</p>
</div>

加上CSS

<style lang="stylus" scoped>
  .carouselInput {
    width: 90%
  }

  .carouselInput .main {
    text-align center
    color: #f50057
  }

  .carouselInput .title {
    font-size 48px
  }

  .carouselInput .subtitle {
    font-size 24px
  }
</style>

調整手機版CSS

@media (min-width: 768px) {
  .carouselInput .title {
    font-size 48px
  }

  .carouselInput .subtitle {
    font-size 24px
  }
}

@media (max-width: 768px) {
  .carouselInput .title {
    font-size 24px
  }

  .carouselInput .subtitle {
    font-size 16px
  }
}

旅遊網站-搜索框

加入搜索框

input

首先到quasar.config.js中引入QInput

framework: {
  components: ['QInput']
}

在<div class="main">後面加入q-input內容：

<q-input
  inverted-light
  color="white"
  placeholder="輸入城市/景點 或是想去的地方"
  :after="[{icon:'fas fa-search-location'}]"
  v-model="search">
</q-input>

inverted顯示背景
color主題顏色
after用來顯示輸入框先後icon

最後綁定v-model="search"，此時須要在data中添加value值，不然會報錯。

data() {
    return {
      search: ''
    }
  }

調整排版

使用 Flex CSS調整組件長度。

<div class="row">
  <div class="col-md-2 col-xs-1"></div>
  <div class="col-md-8 col-xs-10">
    <q-input ...></q-input>
  </div>
  <div class="col-md-2 col-xs-1"></div>
</div>

自動填入`autocomplete`

引入QAutocomplete組件：

framework: {
  components: ['QAutocomplete']
}

加入q-autocomplete：

<q-input ...>
  <q-autocomplete :static-data="{field: 'label', list: countries}"/>
</q-input>

static-data
- field用於搜索數據的欄位
- list搜索的數據來源

設置靜態數據

countries: [
  {label: '廣州市', icon: 'fas fa-map-marker-alt'},
  {label: '深圳市', icon: 'fas fa-map-marker-alt'},
  {label: '珠海市', icon: 'fas fa-map-marker-alt'},
  {label: '[網美景點]香山公園，秋季賞楓勝地', stamp: '北京市'},
  {label: '珠海長隆[海豚劇場]精彩不容錯過！精彩變身演出搶先看', 
   stamp: '珠海，長隆', rightTextColor: 'pink-13'}
]

自定義過濾器`filter`

在q-autocomplete中加入filter：

<q-autocomplete
  :static-data="{field: 'label', list: countries}"
  :filter="advFilter"
/>

引入lodash處理filter。

旅遊網站-Popover彈出框

加入Popover組件

在quasar.config.js中引入QPopover。Popover

no-focus不設焦點
fit彈出框跟輸入框等長
v-show="!search"彈框和候選框不一樣時出現

內容排版

使用FlexCSS來進行排版。

<div class="row viewList">
  <div class="col-sm-4 col-xs-12"></div>
  <div class="col-sm-4 col-xs-12"></div>
  <div class="col-sm-4 col-xs-12"></div>
</div>

設配手機端，在CSS底部加入：

@media (max-width: 576px) {
  .viewList {
    width: 280px
  }
}

解決在手機像素下原來Popover不能自動fix的問。這裏應該是小於Popover的fix的最小寬度。

設置內容(List&Item)

列表類直接用list作最快。

<div class="col-sm-4 col-xs-12">
  <q-list>
    <q-list-header>熱門目的地</q-list-header>
    <q-item>
      <q-item-main>珠海</q-item-main>
    </q-item>
  </q-list>
</div>

加入右側Icon及文字

在src/components下新建LIcon.vue，提高組件複用。

主要使用了q-icon來引入Font Awesome的icon。

在原來的頁面引入子組件

具體代碼：
SectionCarousel.vue
src/components/LIcon.vue

旅遊網站-Cards卡片

創建並引入第二個區塊

在src/pages/Index下新建SectionCards.vue組件，用來做爲卡片區塊。

在Index.vue中引入SectionCards.vue。

區塊內版面規劃

<div class="row">
  <div class="col-12"><b>本月最精選</b></div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片一</div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片二</div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片三</div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片四</div>
</div>

製做卡片

卡片內的內容都會大量重複，因此直接把卡片獨立成一個組件。

在src/components/下新建一個LCard.vue。

在 quasar.config.js中引入卡片組件 Cards

framework: {
  components: [
    'QCard',
    'QCardTitle',
    'QCardMain',
    'QCardMedia',
    'QCardSeparator',
    'QCardActions'
  ]
}

卡片主要分紅三個部分：

q-card-media放照片影片的區塊
q-card-title卡片的標題
q-card-main卡片的主內容
q-card-actions用來放按鈕等操做的區塊
q-card-separator分隔線

在SectionCards.vue中引入LCard.vue。

<div class="col-lg-3 col-sm-6 col-xs-12">
  <l-card/>
</div>

import LCard from 'src/components/LCard.vue'
export default {
  components:{
    LCard
  },
}

加上Icon

繼續補上評分和地標的Icon。

讓LCard的文字能從父組件引入

讓LCard.vue可以動態獲取數據：

<template>
  <q-card inline>
    <q-card-media>
      <img :src="image"/>
    </q-card-media>

    <q-card-title>
      <span>{{title}}</span>
      <div class="q-mt-sm" slot="subtitle">
        <l-icon
          :icon="'fas fa-star'"
          :text="rate"
          :color="'orange'"
          class="q-mr-md"/>
        <span class="q-mr-sm">{{comment}}個評價</span>
        <span>{{view}}人瀏覽</span>
      </div>
    </q-card-title>

    <q-card-main>
      <l-icon
        :icon="'fas fa-map-marker-alt'"
        :text="locate"
        :color="'grey'"
        class="q-mr-md"/>
    </q-card-main>
  </q-card>
</template>

<script>
import LIcon from 'src/components/LIcon';

export default {
  name: "LCard",
  props: {
    image: String,
    title: String,
    rate: String,
    comment: String,
    view: String,
    locate: String
  },
  components: {
    LIcon
  }
}
</script>

在SectionCards設置數據

新增一個data數據monthBestList，而後在template模板中使用v-for獲取數據並顯示。

<template v-for="(data,index) in monthBestList">
  <div class="col-lg-3 col-sm-6 col-xs-12 q-pa-sm" :key="index">
    <l-card
      :title="data.title"
      :rate="data.rate"
      :comment="data.comment"
      :view="data.view"
      :locate="data.locate"
      :image="data.image"
    />
  </div>
</template>

調整CSS及layout

旅遊網站-製做景點詳情頁

在src/pages下新建place文件夾，並在此文件夾下新建Index.vue做爲文章的主要頁面。

設置Vue Router

要進行頁面導航/切換須要用到Vue Router。

在router/routes.js中加入導航：

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      {path: '', component: () => import('pages/Index')},
      {path: 'Place', component: () => import('pages/Place')}
    ]
  }
];

在http://localhost:8080/#/place中查看效果。

加入視差(Parallax)組件

視差(Parallax)

在quasar.config.js中引入QParallax組件。

<template>
  <q-page>
    <q-parallax :src="localData.image" :height="400">
      <p>{{ localData.title }}</p>
    </q-parallax>
  </q-page>
</template>

主題部分的頁面排版

按照8格+4格進行排版：

<div class="row place-main">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

CSS補上左右margin 5%讓頁面看起來不會太滿。

.place-main {
  margin-left 5%
  margin-right 5%
}

設置左邊畫面

這裏要用Quasar的麪包屑BreadCrumbs組件。

在quasar.config.js中引入：

'QBreadcrumbs',
'QBreadcrumbsEl',

加上景點信息及評分的排版

這裏按照8格+4格設定，左側欄要設爲文字靠右對齊。

加上景點信息

引入LIcon.vue圖標組件：

<div class="col-8 info-left">
  <l-icon 
    class="q-mt-sm" 
    :text="'景點編號：' + localData.id" 
    :icon="'fas fa-tag'" 
    :color="'grey'"/><br>
  ...
</div>

加上評分

評分組件Rating

表單組件-Field

表單字段(Field)

Field的組件有QInput、QSeclet、QDatetime、QChipsInput

引入組件

在quasar.config.js中引入組件

基本範例

<q-field
  label="信箱">
  <q-input suffix="@gmail.com" v-model="model"/>
</q-field>

label設置標題文字
icon設置標題的icon
icon-color設置標題icon的顏色
helper組件地下的輔助文字
error控制組件在錯誤時會變成紅色警示
error-label錯誤時會顯示的文字
warning控制組件是否爲警告狀態
warning-label同error-label
count顯示目前輸入多少文字
inset用來爲沒有icon/label的欄位留空
orientation組件的排列方向（水平horizontal/垂直vertical）
label-width文字區塊的寬度（以12格寬度劃分）假設文字的寬度要和輸入同樣長，則設定爲6
dark是文字反白，適用在暗色背景下

表單組件-Chips Input

Chips Input

<q-chips-input float-label="興趣" v-model="model" />

export default {
  data() {
    return {
      model: []
    }
  }
}

外觀屬性

chips-color改變chips的顏色
chips-bg-color改變chips的背景顏色
add-icon替換輸入時顯示在右邊的enter按鈕icon

基本屬性

prefix加入前綴文字（不影響array內的值）
suffix加入後綴文字，能夠跟前綴一塊兒用
hide-underline移除本來輸入框的底線
no-parent-field若是外面套有QField，能夠避免跟QField的效果連結
upper-case自動轉大寫
lower-case自動轉小寫

大部分組件都會重複的基本屬性

float-label懸浮標題
stack-label固定式標題
color組件顏色
inverted是否有背景色
inverted-light改善亮色背景下組件的顯示
dark改善暗色背景下組件的顯示
error錯誤
warning警告
disable跟readonly相似，可是會有灰鍵效果

事件屬性

@input(newVal)輸入文字的同事就會觸發
@change(newVal)數組數值改變觸發
@clear(clearVal)數組被清空時觸發
@duplicate(val)輸入重複的值時觸發
@add(val)輸入時觸發
@remove({index, value})其中一個組件被刪除時觸發

方法屬性(Vue Methods)

這裏的用法一般都是在組件中加入red屬性，而後再其餘地方使用this.$refs來對這些組件進行操做。

add(value)加入值到組件的數組中
remove(index)刪除指定索引的值
focus()聚焦在組件上
select()選擇組件
clear()清除組件中數組的值

<q-chips-input ref="myChipInput" />

addSomething() {
    this.$refs.myChipInput.add('Hello Quasar')
}

表單組件-Radio

引入組件 QRadio，單選框(Radio)

與QField一塊兒使用

<q-field
        label="黃金週去哪玩？"
        orientation="vertical">
    <q-radio v-model="model" label="去杭州" val="hangzhou"/>
    <q-radio v-model="model" label="去北京" val="beijing"/>
    <q-radio v-model="model" label="去成都" val="chengdu"/>
</q-field>

基本屬性

val存儲綁定變量的值
label組件上的文字
left-label設定爲true時，文字會改變顯示在選項的左邊
checked-icon改變選取時的icon
unchecked-icon改變未選取時的icon
color改變組件的顏色
keep-color沒選取時也會有顏色（默認是灰色）
readonly只讀屬性
disable禁用
dark在暗色背景時，凸顯組件文字
no-focus不會觸發聚焦事件

基本事件

@input選取時觸發
@blur失去焦點（點到其餘地方）時觸發
@focus聚焦（點選該組件）時觸發

表單組件-Checkbox

複選框(Checkbox)

引入組件

在quasai.config.js中引入QCheckbox。

複選框須要綁定數據類型爲Array，也須要和QField一塊兒使用。

基本屬性

val數值，加入到v-model綁定的變量中
true-value若是model不是數組，在選取時會給model值true，用來取代true
false-value同上解析
indeterminate-value用來替換null
toggle-indeterminate使點擊可讓狀態在以上三個中轉換

表單組件-Toggle

切換鍵Toggle

引入組件

在quasar.config.js中引入QToggle

基本屬性

val，v-model是Array，會加在Array內
icon若是底下兩個（checke-icon、unchecked-icon）icon 會被覆蓋掉

表單組件-Option Group

選項組option-group

把選項寫進一個Array中，而後直接用v-for所有渲染出來。

引入組件

每一步都是同樣的，在quasar.config.js中引入QOptionGroup。

基本範例

CheckBox

<template>
    <q-field orientation="vertical" label="要選購的商品">
        <q-option-group
                type="checkbox"
                v-model="model"
                :options="optionList"
        />
    </q-field
    >
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                model: [],
                optionList: [
                    {label: '雞蛋', value: 'egg'},
                    {label: '海帶', value: 'seaweed'},
                    {label: '雞腿', value: 'lag'},
                    {label: '牛肉', value: 'beef'}
                ]
            }
        }
    }
</script>

toggle、radio和checkbox相似，只須要修改type屬性值便可

表單組件-Datetime

時間日期輸入框Datetime，有Material和IOS兩種風格。

引入組件

有兩個組件須要引入，一個是輸入時顯示，一個是默認就是顯示的。分別爲：

日期時間輸入Datetime Input

framework: {
  components: ['QDatetime']
}

日期時間選擇器Datetime Picker

framework: {
  components: ['QDatetimePicker']
}

基本操做

// Datetime Input
<q-datetime v-model="model" type="date"/>

// Datetime Picker
<q-datetime-picker v-model="model" type="date"/>

基本屬性

type，一共有三個值，默認是date
1. date單純日期
2. time單純時間
3. datetime時間+日期
minimal，不顯示標題
min max，設置可以選擇的日期時間範圍

<q-datetime v-model="model" type="datetime" max="2019/02/27 2:30"/>

format-model存儲的時間格式，有四種選擇：
1. auto2019-02-27T12:01:00.000+08:00
2. date"2019-02-27T04:00:00.000Z"
3. number1541044860000
4. string2019-02-27T12:01:00.000+08:00
format24h設爲24時制的時鐘

基本方法

Input

show()顯示輸入
hide()隱藏輸入
toggle()切換輸入
clear()清空model

Picker

setYear(val)設置年
setMonth(val)設置月
setDay(val)設置日
setHour(val)設置時
setMinute(val)設置分
setView(val)設置要顯示的模式
clear()清空model

表單組件-Editor

內建的文章編輯器Editor

編輯器（WYSIWYG）

在quasar.config.js中引入QEditor組件。

<q-editor v-model="model"/>

主要設置頁面的屬性有三個：

Toolbar

<q-editor
  v-model="model"
  :toolbar="[
      ['bold','italic','strike','underline'],
      ['hr','link'],
      ['fullscreen'],
      ['print']
    ]"
/>

Definitions
- label要顯示的文字
- icon要顯示的icon
- tip小提示
- cmd若是不想用默認的功能名稱，能夠用這個綁回你要的功能
- handler自定義methods的function名稱
```
save: {
  label:'保存',
  handler: functionName
}
```
- disable禁用

<q-editor
        v-model="model"
        :toolbar="[
        ['bold','italic','strike','underline'],
        ['hr','link'],
        ['fullscreen'],
        ['print']
    ]"
        :definitions="{
            bold:{label:'粗體',icon:null,tip:'這是粗體'}
            }"
/>

Font

<q-editor v-model="model"
          :toolbar="[
        ['arial','arial_black','comic_sans'],
    ]"
          :fonts="{
              arial:'Arial',
              arial_black:'Arial Black',
              comic_sans:'Comic Sans MS'
              }"
/>

基本事件

@input輸入時觸發
@fullscreen(true/false)切換全屏時觸發

表單組件-Knob旋轉按鈕

旋轉按鈕（Knob)

在quasar.config.js中引入QKnob組件。

<q-knob
        v-model="model"
        :min="0"
        :max="25"
>
    <q-icon class="q-mr-xs" name="volume_up"/>
    {{model}}
</q-knob>

屬性

size調整組件的大小，默認120px
step數值的間距
decimals小數點顯示的位數
min max最小值和最大值
color、track-color顏色、未到達的旋轉軸顏色
line-width線條的寬度，默認6px

事件

@input(val)改變時當即觸發
@change(val)改變時觸發
@drag-value(val)拖動時就會觸發

彈窗-Action Sheet

操做表(ActionSheet)

在quasar.config.js中引入ActionSheet組件，有Material和IOS兩種風格。

pluginS形式

framework: {
  plugins: ['ActionSheet']
}

components形式

framework: {
  components: ['QActionSheet']
}

做爲Plugins的使用方法

Vue內

this.$q.actionSheet(configObj)

Vue外

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

this.$q.actionSheet({
    title: '操做選擇',
    grid: true, //使用格狀排版（一排三個）
    dismissLabel: '取消', //取消按鈕的文字 只有IOS主題下可用 默認是cancel
    actions: [
        {
            label: '抓蟲',
            color: 'green',
            icon: 'fas fa-bug',
            handler() {
                console.log('抓蟲大師')
            }
        },
        {
            label: '分享到微博',
            color: 'blue',
            icon: 'fas fa-weibo'
        },
        {
            label: '請人幫忙',
            color: 'black',
            icon: 'fas fa-alipay'
        }
    ]
}).then(action => {}).watch(() => {});

做爲Component的使用方法

跟上面的操做基本上同樣，只是可以多監聽@show和@hide時間。

事件

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

彈窗-Dialog

基本跟上面的Action Sheet同樣的操做方法。

this.$q.dialog({
    title: '選擇主菜',
    message: '主廚精心特製主餐請選擇',
    color: 'red-13',
    ok: true,
    cancel: true,
    preventClose: true, //設置爲true，除非按cancel或是ok，否則不會關閉窗口
    noBackdropDismiss: false, //按空白的地方不會關閉窗口
    noEscDismiss: false, //按Esc不會關閉窗口
    stackButtons: false, //爲true時會將ok/cancel按鈕垂直排列
    position: 'top', //設置窗口顯示的位置

    //使用input
    prompt: {
        mode: '頂級和牛帝王蟹',
        type: 'text'
    },

    //使用option
    options:{
        type:'radio',
        model:'beef', //默認的選項
        items:[
            {label:'絕對不加熱生牛排',value:'beef'},
            {label:'極地冰山沙漠鮪魚',value:'tuna'},
            {label:'超級漆黑山洞野豬肉',value:'pork'}
        ]
    }
}).then(action => {}).watch(() => {});

做爲Component的使用方法

在配置文件中引入QDialog組件。

<q-dialog>
    <span slot="title">標題</span>
    <span slot="message">正文</span>
    <span slot="body">主體</span>
    <span slot="buttons">按鈕</span>
</q-dialog>

彈窗-Modal

模態框(Modal)

引入QModal組件，另外加入directives的CloseOverlay。

使用按鈕或是method將modal設爲true才能打開modal。

全頁顯示

<q-btn @click="model=true">Open</q-btn>
<q-modal v-model="model" content-css="padding: 50px" maximized>
    <h4>想去哪裏玩？</h4>
    <p>自由行·出國度假</p>
    <p>泰國、首爾、珠海、九寨溝</p>
    <q-btn
            class="q-mt-lg"
            color="primary"
            @click="model=false"
            label="訂購行程"
    />
</q-modal>

最小窗口minimized

設置position後會自動清除content-css定義的css，因此要在裏面多一個div來作padding。

<q-modal v-model="model" minimized>
    <div style="padding: 20px">
        ...
    </div>
</q-modal>

基本屬性

minimized，maximized設置窗口最小化或是最大化
no-route-dismiss、no-esc-dismiss、no-backdrop-dismiss分別爲控制換頁、按下Esc、按黑色背景是否會觸發開閉事件
content-css，content-classes，Modal內的CSS及class，在設置了position後會無效
position設置彈窗出來的位置
position-classes設置position後就要用這個來設class，默認是items-center，justify-center
transition，enter-class，leave-class能夠用自定義的CSS來作出場的動畫
no-refocus是否讓關閉窗口時聚焦回到打開窗口前的最後一個組件

Vue方法

控制打開關閉窗口的一些方法，要搭配this.$refs.窗口名稱來使用。

show
hide
toggle

彈窗-Notify

通知框（Notify）

this.$q.notify({
    message: '已保存',
    timeout: 5000,
    // type:'positive', //自帶選項
    color: 'grey',
    textColor: 'blue',
    icon: 'fas fa-warning',
    avatar: 'statics/images', //這個跟icon二選一
    detail: '',
    position: 'top',
    actions: [
        {
            label: '',
            icon: '',
            noDismiss: true,
            handler() {
                console.log('hello world');
            }
        }
    ],
    onDismiss() {
        console.log('warning');
    }
});

在Vue外使用

import {Notify} from 'quasar';

Notify.create('已保存');
//方式二
Notify.create({
    message: '已保存'
});

進度條-Ajax Bar&Loading Bar

Ajax欄(Ajax Bar)

在quasar.config.js中引入QAjaxBar組件。

基本使用

Ajax Bar

由於在每一個頁面都會用到，因此放在最上層App.vue。

<div id="q-app">
    <router-view></router-view>
    <a-ajax-bar/>
</div>

position設置組件位置
size載入條的寬度，默認4px
color默認red
reverse使進度方向相反

基本事件

@start開始動做時觸發
@stop結束動做時觸發

基本方法

start()
stop()

Loading Bar

進度條-Inner Loading

內部加載(Inner Loading)

注意事項

使用InnerLoading時會做用在relative-position這個class下，若是沒有添加這個會變成整頁。

基本操做

index.vue

<template>
  <q-page class="q-ma-lg">
    <q-btn @click="$refs.myField.show()">Open</q-btn>
    <my-field class="relative-position" ref="myField"/>
  </q-page>
</template>

<script>
import MyField from './MyField';

export default {
  name: 'PageIndex',
  components: {
    MyField
  }
}
</script>

MyField.vue

<template>
  <q-field
    label="跨年去哪玩？"
    orientation="vertical"
  >
    <q-radio v-model="model" label="去日本" val="japan" checked-icon="far fa-check-circle" keep-color/>
    <q-radio v-model="model" label="去韓國" val="korea" color="green" keep-color/>
    <q-radio v-model="model" label="在家待着" val="home" color="red" keep-color/>
    <q-inner-loading :visible="visible">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
    </q-inner-loading>
  </q-field>
</template>

<script>
export default {
    name: "MyField",
    data() {
      return {
        model: false,
        visible: false
      }
    },
    methods: {
      show() {
        this.visible = true;
        setTimeout(() => {
          this.visible = false
        }, 5000)
      }
    }
  }
</script>

效果

CSS Helpers

空間排版CSS Spacing Classes

CSS間距類CSS Spacing Classes

基本範例

q-ma-xs

q做爲前綴
ma：
- m類型，margin
- a方向，all
xs範圍的大小跟flex css一致

語法

q-[類型][方向]-[大小]

類型
- m（margin向外擴）
- p（padding向內擴）
方法

總共有7種選擇，除了基本的t(top)，r(right)，l(left)、b(bottom)，a(all)以外，還有兩種x(left+right)，y(top+bottom)。

大小

有none，auto(只能用在margin),xs，sm，md，lg，xl。

陰影CSS Shadows

CSS陰影（立面圖）CSS Shadows

可視範圍CSS Visibility

可視範圍CSS Visibility

位置排版CSS Positioning Classes

CSS定位類CSS Positioning Classes

自定義顏色

調色板(Color Palette)

在src/css/app.styl文件中自定義全局CSS

新增顏色

.text-redsp
  color: #D03F38
.bg-redsp
  background: #D03F38

這裏text和bg須要同時設定。

使用

<q-btn color="redsp">Open</q-btn>

多國語系I18n

Quasar的I18n

多國語系(I18n)

在quasar.config.js中設置：

framework: {
  i18n: 'zh-hans'
}

讀取當前語系

let lang = this.#q.i18n.getLocal()

動態設置

Quasar的切換語系不像是傳統的vue-i18n直接換就能用，必須從新載入新語系的語系檔。

<template>
  <q-btn @click="setLang('zh-hans')">簡體中文</q-btn>
</template>

<script>
  export default {
    name: "I18n",
    methods: {
      setLang(lang) {
        import('quasar-framework/i18n/${lang}').then(lang => {
          this.$q.i18n.set(lang.default)
        })
      }
    }
  }
</script>

Vue-I18n

Vue-I18n在src/i18n裏面，參照已經設定的內容添加本身想要的語系。

應用

<p>{{$t('apple')}}</p>

<q-btn @click="setLang()" :label="$t('setting')"></q-btn>

動態切換語系

methods: {
    setLang() {
        this.$i18m.local = 'zh-CN'
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

使用Quasar設計Material和IOS風格的響應式網站

Quasar

選擇Quasar的5個理由

安裝指南

quasar.config.js

Layout

旅遊網站-Header

Toolbar

QToolbarTitle

List&ListItem

手機端按鈕

設置List和ListItem

旅遊網站-Carousel頁面輪播

創建新的首頁

修改Vue Router

創建輪播的區塊

開始寫輪播

加入輪播的圖片/頁面

加入文字區塊

加上CSS

調整手機版CSS

旅遊網站-搜索框

加入搜索框

調整排版

自動填入autocomplete

設置靜態數據

自定義過濾器filter

旅遊網站-Popover彈出框

加入Popover組件

內容排版

設置內容(List&Item)

加入右側Icon及文字

在原來的頁面引入子組件

旅遊網站-Cards卡片

創建並引入第二個區塊

區塊內版面規劃

製做卡片

加上Icon

讓LCard的文字能從父組件引入

在SectionCards設置數據

調整CSS及layout

旅遊網站-製做景點詳情頁

設置Vue Router

加入視差(Parallax)組件

主題部分的頁面排版

設置左邊畫面

加上景點信息及評分的排版

加上景點信息

加上評分

表單組件-Field

引入組件

基本範例

表單組件-Chips Input

外觀屬性

基本屬性

事件屬性

方法屬性(Vue Methods)

表單組件-Radio

與QField一塊兒使用

基本屬性

基本事件

表單組件-Checkbox

引入組件

基本屬性

表單組件-Toggle

引入組件

基本屬性

表單組件-Option Group

引入組件

基本範例

表單組件-Datetime

引入組件

基本操做

基本屬性

基本方法

表單組件-Editor

內建的文章編輯器Editor

基本事件

表單組件-Knob旋轉按鈕

彈窗-Action Sheet

`quasar.config.js`

設置List和`ListItem`

自動填入`autocomplete`

自定義過濾器`filter`