使用Quasar设计Material和IOS风格的响应式网站

阅读量：6655 次

发布时间：2019-06-25

本文共 15040 字，大约阅读时间需要 50 分钟。

GITHUB：

文章链接：

Quasar

Quasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。

以下内容来自官网，概括了Quasar的主要特点。

Quasar是MIT许可的开源框架（基于），可帮助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

这里是设置是否引入的内容。

Package	name	说明
Roboto Font	`roboto-font`	Material主题的建议字体
Roboto Font Latin Extended	`roboto-font-latin-ext`	Material主题的建议字体
	`material-icons`	Material风格的`icon`
MDI (Material Design Icons)	`mdi`	Material风格的`icon`扩展
Font Awesome	`fontawesome`	自由选择`icon`
	`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到文件中。

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

Toolbar

color

Quasar内建色：

在/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

开始写轮播

在设置文件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']}

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

inverted显示背景

color主题颜色

after用来显示输入框前后icon

最后绑定v-model="search"，此时需要在data中添加value值，否则会报错。

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

调整排版

使用调整组件长度。

自动填入`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。

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来引入的icon。

在原来的页面引入子组件

具体代码：

旅游网站-Cards卡片

建立并引入第二个区块

在src/pages/Index下新建SectionCards.vue组件，用来作为卡片区块。

在Index.vue中引入SectionCards.vue。

区块内版面规划

制作卡片

卡片内的内容都会大量重复，所以直接把卡片独立成一个组件。

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

在
quasar.config.js中引入卡片组件

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能够动态获取数据：

在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)组件

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

主题部分的页面排版

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

CSS补上左右margin 5%让页面看起来不会太满。

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

设置左边画面

这里要用Quasar的面包屑组件。

在quasar.config.js中引入：

'QBreadcrumbs','QBreadcrumbsEl',

加上景点信息及评分的排版

这里按照8格+4格设定，左侧栏要设为文字靠右对齐。

加上景点信息

引入LIcon.vue图标组件：

...

加上评分

评分组件

表单组件-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

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，

与QField一起使用

基本属性

val存储绑定变量的值

label组件上的文字

left-label设定为true时，文字会改变显示在选项的左边

checked-icon改变选取时的icon

unchecked-icon改变未选取时的icon

color改变组件的颜色

keep-color没选取时也会有颜色（默认是灰色）

readonly只读属性

disable禁用

dark在暗色背景时，凸显组件文字

no-focus不会触发聚焦事件

基本事件

@input选取时触发

@blur失去焦点（点到其他地方）时触发

@focus聚焦（点选该组件）时触发

表单组件-Checkbox

引入组件

在quasai.config.js中引入QCheckbox。

复选框需要绑定数据类型为Array，也需要和QField一起使用。

基本属性

val数值，加入到v-model绑定的变量中

true-value如果model不是数组，在选取时会给model值true，用来取代true

false-value同上解析

indeterminate-value用来替换null

toggle-indeterminate使点击可以让状态在以上三个中转换

表单组件-Toggle

引入组件

在quasar.config.js中引入QToggle

基本属性

val，v-model是Array，会加在Array内

icon如果底下两个（checke-icon、unchecked-icon）icon 会被覆盖掉

表单组件-Option Group

把选项写进一个Array中，然后直接用v-for全部渲染出来。

引入组件

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

基本范例

CheckBox

toggle、radio和checkbox类似，只需要修改type属性值即可

表单组件-Datetime

时间日期输入框Datetime，有Material和IOS两种风格。

引入组件

有两个组件需要引入，一个是输入时显示，一个是默认就是显示的。分别为：

日期时间输入

framework: {  components: ['QDatetime']}

日期时间选择器

framework: {  components: ['QDatetimePicker']}

基本操作

// Datetime Input
    // Datetime Picker

基本属性

type，一共有三个值，默认是date
1. date单纯日期
2. time单纯时间
3. datetime时间+日期

minimal，不显示标题

min max，设置能够选择的日期时间范围

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

在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旋转按钮

在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

在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

引入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

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

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

基本使用

Ajax Bar

因为在每个页面都会用到，所以放在最上层App.vue。

position设置组件位置

size载入条的宽度，默认4px

color默认red

reverse使进度方向相反

基本事件

@start开始动作时触发

@stop结束动作时触发

基本方法

start()

stop()

Loading Bar

进度条-Inner Loading

注意事项

使用InnerLoading时会作用在relative-position这个class下，如果没有添加这个会变成整页。

基本操作

index.vue

MyField.vue

效果

CSS Helpers

空间排版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 Visibility

位置排版CSS Positioning Classes

自定义颜色

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

新增颜色

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

这里text和bg需要同时设定。

使用


    
     Open

多国语系I18n

Quasar的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'    }}

转载地址：http://cfnto.baihongyu.com/

你可能感兴趣的文章

XML类及XmlSerializer 的使用

查看>>

Python之简单理解装饰器(1)

查看>>

阿里云发布 Redis 5.0 缓存服务：全新 Stream 数据类型带来不一样缓存体验

Symantec BE2012 0xe000fec9 报错

查看>>

iOS 开发遇到的问题

查看>>

RMAN duplicate 复制数据库 window平台

埃森哲：2017年网络犯罪成本研究报告（含分析）

查看>>

tomcat启动startup.bat一闪而过

做一个Cubieduino如何（有新内容了）？

查看>>

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`