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
<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
List上的标题 -
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>
开始写轮播
在设置文件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
2019-02-27T12:01:00.000+08:00 -
date
"2019-02-27T04:00:00.000Z" -
number
1541044860000 -
string
2019-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'
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。