使用Quasar设计Material和IOS风格的响应式网站
使用Quasar设计Material和IOS风格的响应式网站
来源: 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个理由
- 内建了
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
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
。
在原来的页面引入子组件
旅游网站-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="data: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)组件
在 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的组件有 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
<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
改变选取时的iconunchecked-icon
改变未选取时的iconcolor
改变组件的颜色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
<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
datetimeminimal
,不显示标题min max
,设置能够选择的日期时间范围
<q-datetime v-model="model" type="datetime" max="2019/02/27 2:30"/>
format-model
存储的时间格式,有四种选择:auto
date
number
stringformat24h
设为24时制的时钟
基本方法
Input
show()
hide()
toggle()
clear()
Picker
setYear(val)
setMonth(val)
setDay(val)
setHour(val)
setMinute(val)
setView(val)
clear()
表单组件-Editor
内建的文章编辑器Editor
在 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
要显示的icontip
小提示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旋转按钮
在 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
在 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
引入 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
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
。
<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
注意事项
使用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
基本范例
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
需要同时设定。
使用
<q-btn color="redsp">Open</q-btn>
多国语系I18n
Quasar的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风格的响应式网站》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
使用Quasar设计Material和IOS风格的响应式网站的更多相关文章
- web设计经验<一> 提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
- IE浏览器支持响应式网站设计
目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...
- IT兄弟连 HTML5教程 响应式网站的内容设计
基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1 响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在 ...
- [转]响应式WEB设计学习(2)—视频能够做成响应式吗
原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...
- Responsive Design响应式网站设计心得笔记
这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了.网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览.今天把首页做好,并测试无误,这里把一些应 ...
- 响应式网站设计(Responsive Web design)
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- 响应式网站设计---Bootstrap
响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性. 使用基于Bootstrap ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
随机推荐
- libevent源码分析一--io事件响应
这篇文章将分析libevent如何组织io事件,如何捕捉事件的发生并进行相应的响应.这里不会详细分析event与event_base的细节,仅描述io事件如何存储与如何响应. 1. select l ...
- jQuery基础事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CLRS10.1-7练习 - 用双队列实现栈
算法中心思想: 始终向非空队列进行入队操作 初始化时两个队列都为空,我们对q1进行入队操作 入栈: 只需执行其中一个队列入队操作即可, 具体操作哪一个队列,用一个标记变量标记 出栈流程图 代码实现 p ...
- PyCharm+QTDesigner学习
PyCharm+QTDesigner+PyUIC使用教程:https://www.cnblogs.com/lsdb/p/9122425.html python用pyinstaller生成exe时报错 ...
- 【SpringBoot】SpingBoot整合AOP
https://blog.csdn.net/lmb55/article/details/82470388 [SpringBoot]SpingBoot整合AOPhttps://blog.csdn.net ...
- pyspark学习笔记
记录一些pyspark常用的用法,用到的就会加进来 pyspark指定分区个数 通过spark指定最终存储文件的个数,以解决例如小文件的问题,比hive方便,直观 有两种方法,repartition, ...
- 阿里云ESC服务器配置记录
购买服务器 上周赶着活动购买了一年阿里云服务器,记录一下配置过程: 选择服务器类型: linux服务器,网上说一般都用centOS的"比较新"的版本: 重置密码: 重置密码之后一定 ...
- 2019 光环新网科技java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.光环新网科技等公司offer,岗位是Java后端开发,因为发展原因最终选择去了光环新网科技,入职一年时间了,也 ...
- layui 框架 table插件 实现键盘快捷键 切换单元格编辑
最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 效果图 代码: 1.支持 enter,上,下,右键 切换单元格,支持隐藏列 ...
- 电缆公司如何面对企业改革?MES系统打造智能工厂
项目背景 目前,“互联网+电缆”正在成为电缆行业发展的主流,作为中国领先的大型电缆企业江苏亨通电力电缆有限公司(简称“亨通电缆”)积极响应国家提出的“中国制造2025”号召,实施MES工程项目,启用智 ...