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

欄目: CSS · 發布時間: 8個月前

來源: segmentfault.com

 

本文轉載自：https://segmentfault.com/a/1190000018332068，本站轉載出於傳遞更多信息之目的，版權歸原作者或者來源機構所有。

Quasar

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

以下內容來自官網 Quasar Framework ，概括了 Quasar 的主要特點。

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

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

選擇Quasar的5個理由

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

安裝指南

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

然后安裝 Quasar ， npm install -g quasar-cli 。

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

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

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

quasar.config.js

• plugins

以前在 Vue 安裝其他的 plugin 會在 main.js 里引入，而在 Quasar 就會取代 main.js 成為全部配置文件。

• css

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

• extra

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

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中可用組件，這些組件需要自己去配置文件中自行引入。

QListHeader
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

  date
  time
  datetime
  

• minimal ，不顯示標題
• min max ，設置能夠選擇的日期時間范圍

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

• format-model 存儲的時間格式，有四種選擇：

  auto
  date
  number
  string
  

• format24h 設為24時制的時鍾

基本方法

Input

show()
hide()
toggle()
clear()

Picker

setYear(val) setMonth(val) setDay(val) setHour(val) setMinute(val) setView(val) clear()

表單組件-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

彈窗-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風格的響應式網站》，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對 碼農網 的支持！