Quasar基于vue的前端框架-组件

上一篇介绍了基于quasar的配置能做些什么
本篇了解一下quasar的基于vue的组件

指令

通过v-xxx使用，并且在quasar.config配置文件中提前声明用到的指令
framework: {
directives: [‘Ripple’]
}
<div v-touch-pan="handler">...</div>

组件

组件名用Q开头QBtn和QElementResizeObservable，同样需要在配置文件中提前声明
framework: {
components: [‘QBtn’, ‘QIcon’]
}
<q-icon name="alarm" />

插件

使用Notify，ActionSheet时，需要在配置文件中提前声明
framework: {
plugins: [‘Notify’, ‘ActionSheet’]
}

this.$q.notify(‘Some other message’)
和
import { Notify } from ‘quasar’
Notify.create(‘My message’)

framework:’all’导入所有组件用于测试

平台判断

this.$q.platform.is
this.$q.platform.has
this.$q.platform.within.iframe

注入原型

$q.version
$q.themem
$q.platform
$q.i18n
$q.cordova
$q.electron

风格

css 类似于bootstrap,通过配置约定的class名称，只需写少量class

颜色列表

// class类
class="text-primary"
class="bg-positive"

// Stylus变量
color $red-1
backgroung-color grey-5

// 自定义颜色
.text-brand{
    color:#afsfd
}
// 使用自定义颜色
<q-input color="brand">

import {colors} from ‘quasar’

设置自定义颜色，相当于setProperty()
colors.setBrand(‘light’,’#ddd’,’element’)
获取自定义颜色，相当于getPropertyValue()
colors.getBrand(‘primary’)
getComputedStyle(document.documentElement).getPropertyValue(‘–q-color-primary’)

标题

h1	q-display-4
h2	q-display-3
h3	q-display-2
h4	q-display-1
h5	q-headline
h6	q-title
div	q-display-4subheading
div	q-body2
div	q-body1

粗细

text-weight-thin
text-weight-light
text-weight-regular
text-weight-medium
text-weight-bold
text-weight-bolder

文本类型

<xxx />	标签
samll	小文字
big	大文字
text-bold	strong粗体
text-italic	em斜体
text-right	右侧对齐
no-margin	设置0
no-outline	设置0
block	display设置0

间距

格式：q-[p|m][t|r|b|l|a|x|y]-[none|xs|sm|md|lg|xl]

p-padding
m-margin

top、right、bootom、left、all、both left & rigt、both top & bottom

比如：
class=”q-pa-sm” // 方向小padding
class=”q-mt-md q-mr-sm” // 顶部中margin右边小margin

flex系统