GITHUB：使用Quasar设计旅游网站文章链接：使用Quasar设计Material和IOS风格的响应式网站
Quasar
Quasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。
以下内容来自官网Quasar Framework，概括了Quasar的主要特点。
Quasar是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：
响应式网站
PWA
通过Apache Cordova构建移动App
多平台桌面应用程序（使用Electron）
选择Quasar的5个理由
内建了Material及IOS两种主题
组件均内建RWD快速响应
多样的基础UI组件库
自带了Vuex、VueRouter、Vuei18n（多国语系）
强大的部署工具
安装指南
首先安装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
<p class=”codepen” data-height=”265″ data-theme-id=”0″ data-default-tab=”html” data-user=”whjin” data-slug-hash=”MLNxZN” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”旅游网站-Header”> <span>See the Pen 旅游网站-Header by whjin (@whjin) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></script>
Toolbar
color
Quasar内建色：color-palette
在/src/css/themes/common.variables.styl里面增加调色板的颜色。
inverted
让背景色变成白色，然后使原来白色的文字变成设置的背景色。
glossy
加上玻璃效果
QToolbarTitle
gt-xs
用来设置显示像素高于576px的页面样式。
q-mr-md
mr等于margin-rightsm就是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.vuesrc/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能够动态获取数据：
<p class=”codepen” data-height=”365″ data-theme-id=”0″ data-default-tab=”html” data-user=”whjin” data-slug-hash=”OqJpKq” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”Quasar-LCard.vue”> <span>See the Pen Quasar-LCard.vue by whjin (@whjin) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></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存储的时间格式，有四种选择：
auto2019-02-27T12:01:00.000+08:00
date”2019-02-27T04:00:00.000Z”
number1541044860000
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一样的操作方法。
<p class=”codepen” data-height=”365″ data-theme-id=”0″ data-default-tab=”js” data-user=”whjin” data-slug-hash=”GegPVd” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”弹出窗口-Dialog”> <span>See the Pen 弹出窗口-Dialog by whjin (@whjin) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></script>
作为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）
<p class=”codepen” data-height=”365″ data-theme-id=”0″ data-default-tab=”js” data-user=”whjin” data-slug-hash=”wOaGJO” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”弹窗-Notify”> <span>See the Pen 弹窗-Notify by whjin (@whjin) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></script>
在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
<p class=”codepen” data-height=”265″ data-theme-id=”0″ data-default-tab=”html” data-user=”whjin” data-slug-hash=”rRVJYL” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”Quasar-InnerLoading-Index.vue”> <span>See the Pen Quasar-InnerLoading-Index.vue by whjin (@whjin) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></script>
MyField.vue
<p class=”codepen” data-height=”265″ data-theme-id=”0″ data-default-tab=”html” data-user=”whjin” data-slug-hash=”XGbZEN” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”Quasar-InnerLoading-MyField.vue”> <span>See the Pen Quasar-InnerLoading-MyField.vue by whjin (@whjin) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></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’
}
}
发表回复