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
取代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
好玩旅游网
WeFunWeb
精选景点
美食地图
夜宿晓行
夜宿晓行
注册
登录
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
开始写轮播
在设置文件quasa.config.js
中引入:
framework: {
components: [
'QCarousel',
'QCarouselSlide',
'QCarouselControl'
...
],
}
加入轮播的图片/页面
加入文字区块
Quasar在carousel
中有个子组件QCarouselControl
用来自定义按钮在页面上。
根据官方文档的范例,QCarouselControl
要放在QCarousel
的最后面,也就是QCarouselSlide
的后面。
在q-carousel-control
中加入内容:
新锐旅游网站
您身边的好玩专家
发现周边好玩的地方,玩得快乐,玩得精彩。
加上CSS
调整手机版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']
}
在
q-input
内容:
-
inverted
显示背景 -
color
主题颜色 -
after
用来显示输入框前后icon
最后绑定v-model="search"
,此时需要在data
中添加value
值,否则会报错。
data() {
return {
search: ''
}
}
调整排版
使用 Flex CSS调整组件长度。
自动填入autocomplete
引入QAutocomplete
组件:
framework: {
components: ['QAutocomplete']
}
加入q-autocomplete
:
-
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
:
引入lodash
处理filter
。
旅游网站-Popover弹出框
加入Popover组件
在quasar.config.js
中引入QPopover
。Popover
-
no-focus
不设焦点 -
fit
弹出框跟输入框等长 -
v-show="!search"
弹框和候选框不同时出现
内容排版
使用FlexCSS
来进行排版。
设配手机端,在CSS底部加入:
@media (max-width: 576px) {
.viewList {
width: 280px
}
}
解决在手机像素下原来Popover
不能自动fix
的问。这里应该是小于Popover的fix
的最小宽度。
设置内容(List&Item)
列表类直接用list
做最快。
热门目的地
珠海
加入右侧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
。
区块内版面规划
本月最精选
卡片一
卡片二
卡片三
卡片四
制作卡片
卡片内的内容都会大量重复,所以直接把卡片独立成一个组件。
在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
。
import LCard from 'src/components/LCard.vue'
export default {
components:{
LCard
},
}
加上Icon
继续补上评分和地标的Icon
。
让LCard的文字能从父组件引入
让LCard.vue
能够动态获取数据:
{{title}}
{{comment}}个评价
{{view}}人浏览
在SectionCards设置数据
新增一个data
数据monthBestList
,然后在template
模板中使用v-for
获取数据并显示。
调整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
组件。
{{ localData.title }}
主题部分的页面排版
按照8格+4格进行排版:
CSS补上左右margin 5%
让页面看起来不会太满。
.place-main {
margin-left 5%
margin-right 5%
}
设置左边画面
这里要用Quasar的面包屑BreadCrumbs组件。
在quasar.config.js
中引入:
'QBreadcrumbs',
'QBreadcrumbsEl',
加上景点信息及评分的排版
这里按照8格+4格
设定,左侧栏要设为文字靠右对齐。
加上景点信息
引入LIcon.vue
图标组件:
...
加上评分
评分组件Rating
表单组件-Field
表单字段(Field)
Field的组件有QInput
、QSeclet
、QDatetime
、QChipsInput
引入组件
在quasar.config.js
中引入组件
基本范例
-
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
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()
清除组件中数组的值
addSomething() {
this.$refs.myChipInput.add('Hello Quasar')
}
表单组件-Radio
引入组件
QRadio
,
单选框(Radio)
与QField一起使用
基本属性
-
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
toggle
、radio
和checkbox
类似,只需要修改type
属性值即可
表单组件-Datetime
时间日期输入框Datetime,有Material和IOS两种风格。
引入组件
有两个组件需要引入,一个是输入时显示,一个是默认就是显示的。分别为:
日期时间输入Datetime Input
framework: {
components: ['QDatetime']
}
日期时间选择器Datetime Picker
framework: {
components: ['QDatetimePicker']
}
基本操作
// Datetime Input
// Datetime Picker
基本属性
-
type
,一共有三个值,默认是date
-
date
单纯日期 -
time
单纯时间 -
datetime
时间+日期
-
-
minimal
,不显示标题 -
min max
,设置能够选择的日期时间范围
-
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
组件。
主要设置页面的属性有三个:
Toolbar
-
Definitions
-
label
要显示的文字 -
icon
要显示的icon -
tip
小提示 -
cmd
如果不想用默认的功能名称,可以用这个绑回你要的功能 -
handler
自定义methods
的function
名称
save: { label:'保存', handler: functionName }
-
disable
禁用
-
Font
基本事件
-
@input
输入时触发 -
@fullscreen(true/false)
切换全屏时触发
表单组件-Knob旋转按钮
旋转按钮(Knob)
在quasar.config.js
中引入QKnob
组件。
{{model}}
属性
-
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
组件。
标题
正文
主体
按钮
弹窗-Modal
模态框(Modal)
引入QModal
组件,另外加入directives
的CloseOverlay
。
使用按钮或是method
将modal
设为true
才能打开modal
。
全页显示
Open
想去哪里玩?
自由行·出国度假
泰国、首尔、珠海、九寨沟
最小窗口minimized
设置position
后会自动清除content-css
定义的css
,所以要在里面多一个div
来做padding
。
...
基本属性
-
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
。
-
position
设置组件位置 -
size
载入条的宽度,默认4px
-
color
默认red
-
reverse
使进度方向相反
基本事件
-
@start
开始动作时触发 -
@stop
结束动作时触发
基本方法
start()
stop()
Loading Bar
进度条-Inner Loading
内部加载(Inner Loading)
注意事项
使用InnerLoading时会作用在relative-position
这个class
下,如果没有添加这个会变成整页。
基本操作
index.vue
Open
MyField.vue
效果
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
需要同时设定。
使用
Open
多国语系I18n
Quasar的I18n
多国语系(I18n)
在quasar.config.js
中设置:
framework: {
i18n: 'zh-hans'
}
读取当前语系
let lang = this.#q.i18n.getLocal()
动态设置
Quasar的切换语系不像是传统的vue-i18n
直接换就能用,必须重新载入新语系的语系档。
简体中文
Vue-I18n
Vue-I18n在src/i18n
里面,参照已经设定的内容添加自己想要的语系。
应用
{{$t('apple')}}
动态切换语系
methods: {
setLang() {
this.$i18m.local = 'zh-CN'
}
}