GITHUB:Using Quasar to Design Tourism Websites
Article link:Use Quasar to Design Material and IOS-style Responsive Websites
Quasar
Quasar
It is based onVue.js
DevelopedUI
The framework can make it easy for you to build a concise and lively interface of the website. More importantly, it can also make it easy for you to do well.RWD
(responsive website design), in addition to helping you addPWA
, make your web page into a mobile phoneApp
.
The following is from the official websiteQuasar Framework, summarizedQuasar
The main characteristics of.
Quasar
YesMIT
Licensed Open Source Framework (Based onVue), which can helpWeb
Developers create:
- Responsive website
PWA
- via
Apache Cordova
Build moveApp
- Multi-Platform Desktop Applications (Using
Electron
)
Five Reasons to Choose Quasar
- Built-in
Material
AndIOS
Two themes - Components are built-in
RWD
quick response - Diverse foundations
UI
Component library - I brought it with me.
Vuex
、VueRouter
、Vuei18n
(Multilingual Department) - Powerful deployment tools
Installation guide
First installNode.js
Andvue-cli
See the official website for specific installation methods.
Then installQuasar
,npm install -g quasar-cli
.
Finally, build the project:quasar init <folder name>
Replacemain.js
Thequasar.config.js
Setup file:
- Reference to Quasar’s built-in components can be avoided everywhere
import components
-
i18n
Setting up Multilingual Department -
icons
Remove comments to use -
Development mode
HTTPS under andport
Set up -
CSS
Animation settings - Settings for other external plug-ins
-
PWA
、manifest
Settings such as
quasar.config.js
plugins
In the pastVue
Install otherplugin
Will be inmain.js
In the introduction, and inQuasar
Will replacemain.js
Become all configuration files.
css
The introduction of CSS will be placed in this file, the default location./src/css
, the required CSS library is ready for direct use.
extra
Here is whether the setting is introduced or not.quasar-extrasThe content of.
Package | name | explain |
---|---|---|
Roboto Font | roboto-font |
Suggested fonts for Material themes |
Roboto Font Latin Extended | roboto-font-latin-ext |
Suggested fonts for Material themes |
Material Icons | material-icons |
Material styleicon
|
MDI (Material Design Icons) | mdi |
Material styleicon extend |
Font Awesome | fontawesome |
optionicon
|
Ionicons | ionicons |
ionicons Theicon
|
Animate.css | animations |
Web Component Animation |
scopeHoiting
Defaulttrue
To promotewebpack
Runtime performance
VueRouterMode
Set upVue Router
The mode of, there arehistory
、hash
Two values.
vueCompiler
Compiling modes including two Vuevue runtime
+compiler
, the default is onlyruntime-only
Runtime compilation
gzip
Enable website supportgzip
The format of the.
analyze
Inbuild
Thewebpack-bundle-analyzer
Tools.
extractCSS
Extract CSS into the file.VueLoader
extendWebpack
Indev
Settings for servers in mode.
https
port
Set to the specifiedport
When quasar is runningdev
Mode, encountered the sameport
When will oneself again+1
.
open
Is it indev
After the command is executed, the page of this website will be opened automatically on the browser.
Layout
quasar dev
Open the initial pageheader
Anddrawer
All inlayout/MyLayout.vue
Li.
Some common attributes:
Attribute | Value | explain |
---|---|---|
side |
String |
There are two valuesleft ,right To decide whether to appear on the left or right |
overlay |
Boolean |
Set the sidebar to squeeze when it pops up.q-page-container Or is it directly covered on it |
content-style |
Object |
Set CSS for Sidebar |
content-class |
String/Object/Array |
The that sets the sidebarclass
|
mini |
Boolean |
Reduce the sidebar to onlyicon
|
CSS to be used here
Object
In the same way.
:content-style="{color: 'red'}"
Tourism website -Header
Demonstration project:
- 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 built-in color:color-palette
In/src/css/themes/common.variables.styl
Add a palette of colors inside.
inverted
Letbackground colorBecomeWhite, and then make the original white text into setbackground color.
glossy
Add glass effect
QToolbarTitle
gt-xs
Used to set display pixels above576px
The page style of the.
q-mr-md
mr
equal tomargin-right
sm
exactlysize
The value of issmall
Other non-appearance functional attributes:
-
disable
,:disable="true"
When the button is disabled -
label
Set the text of the button -
type
Can bebutton
、submit
、reset
One of them -
loading
, the value istrue
Display reading -
percentage
According to the read circle, followloading
Use together -
dark-percentage
Used on buttons in bright colors
List&ListItem
Modify Drawer
-
v-model="rightDrawerOpen"
Controls the position of the pop-up sidebar -
content-class="bg-grey-10"
background color -
side="right"
The button is set on the multilateral side.
Set uprightDrawerOpen
Need to add todata
Li.
export default {
name: 'MyLayout',
data () {
return {
rightDrawerOpen: false
}
}
}
Mobile button
Controlled displayclass
Uselt-sm
As long as the pixel is less thansm(768px)
This area is displayed.
Set List andListItem
Use the Dark property to make the component content display better on a dark background
List of available components, these components need to be introduced into the configuration file.
-
QListHeader
Title on List -
QItemSeparator
cut-off rule QItem
-
QItemSide
It can be divided into left and right blocks. -
QItemMain
Middle block -
QItemTitle
Title in block
Tourism website -Carousel page
Create a new home page
Insrc/pages/
New belowIndex
Folder and create a new one under this folderIndex.vue
As the home page, delete the originalIndex.vue
Documents.
Modify vuelouter
Insrc/router/routers.js
ModifyIndex.vue
The path of the.
Create blocks for rotation
Insrc/pages/Index
New belowSectionCarousel.vue
, and inIndex.vue
Introduction of.
Then againtemplate
inferiorq-page
Add insection-carousel
<template>
<q-page>
<section-carousel></section-carousel>
</q-page>
</template>
Start writing carousel
In the settings filequasa.config.js
Introduction of:
framework: {
components: [
'QCarousel',
'QCarouselSlide',
'QCarouselControl'
...
],
}
Add carousel pictures/pages
<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>
Add text block
Quasar incarousel
There are subcomponents inQCarouselControl
Used to customize buttons on the page.
According to the example of official documents,QCarouselControl
Put it onQCarousel
At the back of the, that isQCarouselSlide
The back of the.
<q-carousel-control
position="center"
slot="control-nav"
slot-scope="carousel"
class="carouselInput">
</q-carousel-control>
Inq-carousel-control
Add content to:
<div class="main">
<h6 class="title">新锐旅游网站</h6>
<p class="subtitle">您身边的好玩专家</p>
<p>发现周边好玩的地方,玩得快乐,玩得精彩。</p>
</div>
Plus 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>
Adjust CSS for Mobile Phone Edition
@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
}
}
Travel website-search box
Add search box
input
First toquasar.config.js
Introduction ofQInput
framework: {
components: ['QInput']
}
In<div class="main">
Add afterq-input
Contents:
<q-input
inverted-light
color="white"
placeholder="输入城市/景点 或是想去的地方"
:after="[{icon:'fas fa-search-location'}]"
v-model="search">
</q-input>
-
inverted
displayBackground -
color
Theme color -
after
Used to display the input box before and aftericon
Final bindingv-model="search"
, at this time need to be indata
Add tovalue
Value, otherwise an error will be reported.
data() {
return {
search: ''
}
}
Adjust typesetting
UseFlex CSSAdjust the component length.
<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>
Automatic fillingautocomplete
introduceQAutocomplete
Components:
framework: {
components: ['QAutocomplete']
}
joinq-autocomplete
:
<q-input ...>
<q-autocomplete :static-data="{field: 'label', list: countries}"/>
</q-input>
-
static-data
-
field
Fields for searching data -
list
Sources of data searched
-
Set static data
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'}
]
Custom filterfilter
Inq-autocomplete
Add infilter
:
<q-autocomplete
:static-data="{field: 'label', list: countries}"
:filter="advFilter"
/>
introducelodash
To deal withfilter
.
Tourism website -Popover pop-up box
Add Popover component
Inquasar.config.js
Introduction ofQPopover
.Popover
-
no-focus
No focus -
fit
The pop-up box is the same length as the input box. -
v-show="! search"
The bullet box and the candidate box do not appear at the same time.
Content layout
UseFlexCSS
For typesetting.
<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>
Set up a mobile phone terminal and add at the bottom of CSS:
@media (max-width: 576px) {
.viewList {
width: 280px
}
}
The invention solves the problem that under the pixel of the mobile phonePopover
Not automaticfix
This is a question. This should be less than Popoverfix
Theminimum widith.
Set content (List&Item)
List Class Directly Usedlist
The fastest.
<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>
Add right Icon and text
Insrc/components
New belowLIcon.vue
, promote component reuse.
Mainly usedq-icon
To introduceFont AwesomeTheicon
.
Introduce subcomponents to the original page
Specific code:
SectionCarousel.vue
src/components/LIcon.vue
Travel website -Cards
Create and introduce a second block
Insrc/pages/Index
New belowSectionCards.vue
The module is used as a card block.
InIndex.vue
Introduction ofSectionCards.vue
.
Layout planning within blocks
<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>
Make cards
The contents of the card will be repeated in large quantities, so the card is directly separated into a component.
Insrc/components/
Create a new one nextLCard.vue
.
In
quasar.config.js
The card assembly is introduced into theCards
framework: {
components: [
'QCard',
'QCardTitle',
'QCardMain',
'QCardMedia',
'QCardSeparator',
'QCardActions'
]
}
The card is mainly divided into three parts:
-
q-card-media
The block where the photo film is shown. -
q-card-title
Title of card -
q-card-main
The main contents of the card -
q-card-actions
A block used to hold buttons and other operations. -
q-card-separator
line between
InSectionCards.vue
Introduction ofLCard.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
},
}
Add Icon
Continue to make upscoreAndLandmarkTheIcon
.
Let LCard text be imported from the parent component.
LetLCard.vue
Ability to dynamically acquire data:
<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>
Setting data in SectionCards
Add a new onedata
DatamonthBestList
, and then intemplate
Used in templatesv-for
Get the data and display it.
<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>
Adjust CSS and layout
Tourism Website-Making Attraction Details Page
Insrc/pages
New belowplace
Folder and create a new one under this folderIndex.vue
As the main page of the article.
Set up vuelouter
Vue Router is required for page navigation/switching.
Inrouter/routes.js
Add navigation to:
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{path: '', component: () => import('pages/Index')},
{path: 'Place', component: () => import('pages/Place')}
]
}
];
Inhttp://localhost:8080/#/place
To see the effect.
Adding Parallax Components
Inquasar.config.js
Introduction ofQParallax
Components.
<template>
<q-page>
<q-parallax :src="localData.image" :height="400">
<p>{{ localData.title }}</p>
</q-parallax>
</q-page>
</template>
Page layout of theme section
According to the 8 +4 grid layout:
<div class="row place-main">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
CSS added left and rightmargin 5%
Make the page look less full.
.place-main {
margin-left 5%
margin-right 5%
}
Set left screen
We need Quasar crumbs here.BreadCrumbsComponents.
Inquasar.config.js
Introduction of:
'QBreadcrumbs',
'QBreadcrumbsEl',
Add scenic spot information and grading layout
According to8 +4 squares
Set the left column to align the text to the right.
Add scenic spot information
introduceLIcon.vue
Icon component:
<div class="col-8 info-left">
<l-icon
class="q-mt-sm"
:text="'景点编号:' + localData.id"
:icon="'fas fa-tag'"
:color="'grey'"/><br>
...
</div>
Add a score
Scoring componentRating
Form component -Field
Field’s components areQInput
、QSeclet
、QDatetime
、QChipsInput
Incoming component
Inquasar.config.js
Introduce components into
Basic example
<q-field
label="信箱">
<q-input suffix="@gmail.com" v-model="model"/>
</q-field>
-
label
Set title text -
icon
The that sets the titleicon
-
icon-color
Set titleicon
The color of -
helper
Auxiliary Text Under Components -
error
The control assembly will turn red when it is wrong. -
error-label
Text to be displayed in case of error -
warning
Controls whether the component is in a warning state -
warning-label
witherror-label
-
count
Displays how much text is currently entered -
inset
Used for noicon/label
The field for is empty -
orientation
The arrangement direction of components (horizontalhorizontal
/verticalvertical
) -
label-width
The width of the text block (in12
Grid width division) set to assuming that the width of the text is as long as the input6
-
dark
Is the text highlighted, suitable for dark background
Form component-chipinput
<q-chips-input float-label="兴趣" v-model="model" />
export default {
data() {
return {
model: []
}
}
}
Appearance attribute
-
chips-color
Changechips
The color of -
chips-bg-color
Changechips
The background color of -
add-icon
The displayed on the right when replacing the inputenter
Buttonicon
Basic attribute
-
prefix
Add prefix text (does not affectarray
Value within) -
suffix
Add suffix text, which can be used with prefix. -
hide-underline
Remove the bottom line of the original input box -
no-parent-field
If QField is set outside, it can avoid linking with the effect of QField. -
upper-case
Automatic capitalization -
lower-case
Automatically convert to lowercase
Basic attributes that most components repeat
-
float-label
Suspended title -
stack-label
Fixed title -
color
Component color -
inverted
Is there a background color -
inverted-light
Improve the display of components under bright background -
dark
Improves display of components on dark backgrounds -
error
Error -
warning
Warning -
disable
withreadonly
Similar, but with gray key effect
event attribute
-
@input(newVal)
Colleagues who enter text will trigger -
@change(newVal)
Trigger of array value change -
@clear(clearVal)
Triggered when the array is emptied -
@duplicate(val)
Triggered when duplicate values are entered -
@add(val)
Triggered on input -
@remove({index, value})
Triggered when one of the components is deleted
Method properties (Vue Methods)
The usage here is usually added to the assembly.red
Property, and then use it elsewhere.this.$refs
To operate on these components.
-
add(value)
Adds a value to an array of components -
remove(index)
Deletes the value of the specified index -
focus()
Focus on components -
select()
Select component -
clear()
Clears the value of the array in the component
<q-chips-input ref="myChipInput" />
addSomething() {
this.$refs.myChipInput.add('Hello Quasar')
}
Form component -Radio
Incoming component
QRadio
,Radio
Used with 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>
Basic attribute
-
val
Stores the value of a bound variable -
label
Text on assembly -
left-label
Set totrue
When, the text changes to appear to the left of the option -
checked-icon
Change icon when selecting -
unchecked-icon
Change icon when not selected -
color
Change the color of components -
keep-color
There is also a color when not selected (the default is gray) -
readonly
Read-only attribute -
disable
Disable -
dark
Highlight assembly text on dark background -
no-focus
The focus event will not be triggered
elementary event
-
@input
Triggered when selected -
@blur
Triggered when losing focus (point to other places) -
@focus
Triggered when focusing (clicking on the component)
Form Component -Checkbox
Incoming component
Inquasai.config.js
Introduction ofQCheckbox
.
Check box requires binding data type to beArray
, also need andQField
Together.
Basic attribute
-
val
Value added tov-model
In bound variables -
true-value
Ifmodel
Not an array, will be given when selectedmodel
valuetrue
To replacetrue
-
false-value
Same as above -
indeterminate-value
To replacenull
-
toggle-indeterminate
Click to switch the status among the above three
Form Component -Toggle
Incoming component
Inquasar.config.js
Introduction ofQToggle
Basic attribute
-
val
,v-model
YesArray
, will be added to theArray
Inside -
icon
If the bottom two (checke-icon
、unchecked-icon
) icon will be overwritten
Form component -Option Group
Write the option into oneArray
, and then directly usev-for
All rendered.
Incoming component
Every step is the same, inquasar.config.js
Introduction ofQOptionGroup
.
Basic example
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
Andcheckbox
Similarly, only modifications are requiredtype
Attribute values are sufficient
Form Component -Datetime
Datetime, the time and date input box, has two styles: Material and IOS.
Incoming component
There are two components that need to be introduced, one is displayed during input and the other is displayed by default. They are:
Date and time inputDatetime Input
framework: {
components: ['QDatetime']
}
Date and time selectorDatetime Picker
framework: {
components: ['QDatetimePicker']
}
Basic operation
// Datetime Input
<q-datetime v-model="model" type="date"/>
// Datetime Picker
<q-datetime-picker v-model="model" type="date"/>
Basic attribute
-
type
, a total of three values, the default isdate
-
date
Simple date -
time
Simple time -
datetime
Time+Date
-
-
minimal
, do not display the title -
min max
, set the date and time range that can be selected.
<q-datetime v-model="model" type="datetime" max="2019/02/27 2:30"/>
-
format-model
There are four options for the time format of storage:-
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
Set to 24-hour clock
Basic method
Input
-
show()
Display input -
hide()
Hide input -
toggle()
Toggle input -
clear()
Empty model
Picker
-
setYear(val)
Setting year -
setMonth(val)
Set month -
setDay(val)
Setting day -
setHour(val)
When setting up -
setMinute(val)
Set score -
setView(val)
Set the mode to display -
clear()
Empty model
Form Component -Editor
Built-in article Editor
Inquasar.config.js
Introduction ofQEditor
Components.
<q-editor v-model="model"/>
There are three main settings page properties:
Toolbar
<q-editor
v-model="model"
:toolbar="[
['bold','italic','strike','underline'],
['hr','link'],
['fullscreen'],
['print']
]"
/>
-
Definitions
-
label
The text to display -
icon
Icon to display -
tip
Tips -
cmd
If you don’t want to use the default function name, you can use this to tie back the function you want. -
handler
custommethods
Thefunction
Name
save: { Label:' save', handler: functionName }
-
disable
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'
}"
/>
elementary event
-
@input
Triggered on input -
@fullscreen(true/false)
Triggered when switching full screen
Form Component -Knob Rotate Button
Inquasar.config.js
Introduction ofQKnob
Components.
<q-knob
v-model="model"
:min="0"
:max="25"
>
<q-icon class="q-mr-xs" name="volume_up"/>
{{model}}
</q-knob>
Attribute
-
size
Resize components, default120px
-
step
Spacing of values -
decimals
Number of digits displayed by decimal point -
min max
Minimum and maximum values -
color
、track-color
Color, rotation axis color not reached -
line-width
Width of line, default6px
Events
-
@input(val)
Triggered immediately upon change -
@change(val)
Triggered on change -
@drag-value(val)
Triggered when dragging
Pop-up window -Action Sheet
Inquasar.config.js
Introduction ofActionSheet
Component, there are two styles of Material and IOS.
pluginS
Form
framework: {
plugins: ['ActionSheet']
}
components
Form
framework: {
components: ['QActionSheet']
}
As the use method of Plugins
Vueney
this.$q.actionSheet(configObj)
Outside 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(() => {});
As the use method of Component
It is basically the same as the above operation, except that it can monitor more.@show
And@hide
Time.
Events
-
@ok
Triggered when an option is clicked -
@cancel
Triggered on cancellation -
@show
Triggered on display -
@hide
Triggered when hidden -
@escape-key
Triggered when Esc is pressed
Pop-up window -Dialog
The operation method is basically the same as that of Action Sheet above.
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(() => {});
As the use method of Component
Introduce in configuration fileQDialog
Components.
<q-dialog>
<span slot="title">标题</span>
<span slot="message">正文</span>
<span slot="body">主体</span>
<span slot="buttons">按钮</span>
</q-dialog>
Pop-up window -Modal
introduceQModal
Components, in addition to adddirectives
TheCloseOverlay
.
Use buttons ormethod
willmodal
Set totrue
To openmodal
.
Full page display
<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>
Minimum windowminimized
Set upposition
It will be cleared automatically afterwards.content-css
Definedcss
, so want to be in one morediv
Do itpadding
.
<q-modal v-model="model" minimized>
<div style="padding: 20px">
...
</div>
</q-modal>
Basic attribute
-
minimized
,maximized
Set the window to minimize or maximize -
no-route-dismiss
、no-esc-dismiss
、no-backdrop-dismiss
They are respectively to control whether switching pages, pressing Esc and pressing black background will trigger the opening and closing events. -
content-css
,content-classes
CSS and class in Modal are set inposition
It will be invalid later. -
position
Set the location of the pop-up window -
position-classes
Set upposition
This will be used later.class
, the default isitems-center
,justify-center
-
transition
,enter-class
,leave-class
You can use custom CSS to animate your appearance. -
no-refocus
Do you want to focus on the last component before opening the window when closing the window
Vue method
Some methods of controlling the opening and closing of windows should be matchedThis. $ refs.window name
To use.
show
hide
toggle
Pop-up window -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');
}
});
Use outside Vue
import {Notify} from 'quasar';
Notify.create('已保存');
//方式二
Notify.create({
message: '已保存'
});
Progress bar -Ajax Bar&Loading Bar
Inquasar.config.js
Introduction ofQAjaxBar
Components.
Basic usage
Ajax Bar
Because it is used on every page, it is placed at the top.App.vue
.
<div id="q-app">
<router-view></router-view>
<a-ajax-bar/>
</div>
-
position
Set component position -
size
Width of load bar, default4px
-
color
Defaultred
-
reverse
Make progress in the opposite direction
elementary event
-
@start
Triggered when action is started -
@stop
Triggered at end of action
Basic method
start()
stop()
Loading Bar
Progress bar -Inner Loading
Matters needing attention
When using InnerLoading, it acts onrelative-position
This ..class
Next, if this is not added, it will become the whole page.
Basic operation
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>
Effect
CSS Helpers
Space typesetting csss spaceclasses
Basic example
q-ma-xs
-
q
As a prefix -
ma
:-
m
Type,margin
-
a
Direction,all
-
-
xs
The size of the range is the same asflex css
Consistent
Grammar
q-[类型][方向]-[大小]
-
Type
-
m
(margin
Outward expansion) -
p
(padding
Expand inward)
-
- Method
There are a total of 7 choices, except the basic ones.t(top)
,r(right)
,l(left)
、b(bottom)
,a(all)
In addition, there are two kindsx(left+right)
,y(top+bottom)
.
- Size
Yesnone
,auto
(can only be used inmargin
),xs
,sm
,md
,lg
,xl
.
Shadows CSS Shadows
Visual range CSS Visibility
Position typesetting CSS Positioning Classes
Custom color
Insrc/css/app.styl
Custom global CSS in file
Add color
.text-redsp
color: #D03F38
.bg-redsp
background: #D03F38
Heretext
Andbg
It needs to be set at the same time.
Use
<q-btn color="redsp">Open</q-btn>
Multilingual department I18n
I18n of Quasar
Inquasar.config.js
Settings in:
framework: {
i18n: 'zh-hans'
}
Read the current language family
let lang = this.#q.i18n.getLocal()
Dynamic settings
Quasar’s switching language family is not traditionalvue-i18n
It can be changed directly and the language file of the new language family must be reloaded.
<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-I18nsrc/i18n
Inside, add the desired language family according to the set content.
Application
<p>{{$t('apple')}}</p>
<q-btn @click="setLang()" :label="$t('setting')"></q-btn>
Dynamic switching language family
methods: {
setLang() {
this.$i18m.local = 'zh-CN'
}
}