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

末蓝、 2022-03-07 16:52 155阅读 0赞

> GITHUB： [使用Quasar设计旅游网站][Quasar]  
> 文章链接： [使用Quasar设计Material和IOS风格的响应式网站][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个理由 ##

1.  内建了`Material`及`IOS`两种主题
2.  组件均内建`RWD`快速响应
3.  多样的基础`UI`组件库
4.  自带了`Vuex`、`VueRouter`、`Vuei18n`（多国语系）
5.  强大的部署工具

## 安装指南 ##

首先安装`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][]的内容。

<table> 
 <thead> 
  <tr> 
   <th>Package</th> 
   <th>name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Roboto Font</td> 
   <td><code>roboto-font</code></td> 
   <td>Material主题的建议字体</td> 
  </tr> 
  <tr> 
   <td>Roboto Font Latin Extended</td> 
   <td><code>roboto-font-latin-ext</code></td> 
   <td>Material主题的建议字体</td> 
  </tr> 
  <tr> 
   <td><a href="https://material.io/tools/icons/?style=baseline" rel="nofollow">Material Icons</a></td> 
   <td><code>material-icons</code></td> 
   <td>Material风格的<code>icon</code> </td> 
  </tr> 
  <tr> 
   <td>MDI (Material Design Icons)</td> 
   <td><code>mdi</code></td> 
   <td>Material风格的<code>icon</code>扩展</td> 
  </tr> 
  <tr> 
   <td>Font Awesome</td> 
   <td><code>fontawesome</code></td> 
   <td>自由选择<code>icon</code> </td> 
  </tr> 
  <tr> 
   <td><a href="https://ionicons.com/" rel="nofollow">Ionicons</a></td> 
   <td><code>ionicons</code></td> 
   <td> <code>ionicons</code>的<code>icon</code> </td> 
  </tr> 
  <tr> 
   <td>Animate.css</td> 
   <td><code>animations</code></td> 
   <td>网页组件动画</td> 
  </tr> 
 </tbody> 
</table>

*  `scopeHoiting`

默认`true`，用来提升`webpack`运行时的性能

*  `VueRouterMode`

设置`Vue Router`的模式，有`history`、`hash`两种值。

*  `vueCompiler`

包含两种Vue的编译模式`vue runtime`\+`compiler`，默认只有`runtime-only`运行时编译

*  `gzip`

使网站支持`gzip`的格式。

*  `analyze`

在`build`时会运行`webpack-bundle-analyzer`工具。

![1171528228-5c76cf33c9019_articlex][]

*  `extractCSS`

提取CSS到文件中。[VueLoader][]

*  `extendWebpack`

在`dev`模式中服务器的设置。

*  `https`
 *  `port`

设置成指定的`port`，当quasar在运行`dev`模式时，遇到相同的`port`时会自己再`+1`。

*  `open`

是否在`dev`指令执行完成后，自动开启此网站的分页在浏览器上。

### Layout ###

`quasar dev`打开初始页面，页面的`header`和`drawer`都是在`layout/MyLayout.vue`里。

![2572099372-5c76cf338f9db_articlex][]

一些常用的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>取值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>side</code></td> 
   <td><code>String</code></td> 
   <td>有两个值<code>left</code>，<code>right</code>，决定要出现在左边还是右边</td> 
  </tr> 
  <tr> 
   <td><code>overlay</code></td> 
   <td><code>Boolean</code></td> 
   <td>设置侧边栏弹出时是挤压<code>q-page-container</code>还是直接盖在上面</td> 
  </tr> 
  <tr> 
   <td><code>content-style</code></td> 
   <td><code>Object</code></td> 
   <td>设置侧边栏的CSS</td> 
  </tr> 
  <tr> 
   <td><code>content-class</code></td> 
   <td><code>String/Object/Array</code></td> 
   <td>设置侧边栏的<code>class</code> </td> 
  </tr> 
  <tr> 
   <td><code>mini</code></td> 
   <td><code>Boolean</code></td> 
   <td>把侧边栏缩小到只有<code>icon</code> </td> 
  </tr> 
 </tbody> 
</table>

> 这里的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`

![3743439922-5c76cf33f2d1f_articlex][]

**其他非外观的功能属性：**

*  `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`

### 开始写轮播 ###

[官方Carousel][Carousel]

在设置文件`quasa.config.js`中引入：

framework: {
      components: [
        'QCarousel',
        'QCarouselSlide',
        'QCarouselControl'
        ...
      ],
    }

### 加入轮播的图片/页面 ###

### 加入文字区块 ###

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 ###

### 调整手机版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][]调整组件长度。

### 自动填入`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`来进行排版。

设配手机端，在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`。

### 在原来的页面引入子组件 ###

> 具体代码：  
> [SectionCarousel.vue][]  
> [src/components/LIcon.vue][src_components_LIcon.vue]

## 旅游网站-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`。

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="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`获取数据并显示。

### 调整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)][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格进行排版：

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]

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 ##

> [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)][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`改变选取时的icon
 *  `unchecked-icon`改变未选取时的icon
 *  `color`改变组件的颜色
 *  `keep-color`没选取时也会有颜色（默认是灰色）
 *  `readonly`只读属性
 *  `disable`禁用
 *  `dark`在暗色背景时，凸显组件文字
 *  `no-focus`不会触发聚焦事件

### 基本事件 ###

*  `@input`选取时触发
 *  `@blur`失去焦点（点到其他地方）时触发
 *  `@focus`聚焦（点选该组件）时触发

## 表单组件-Checkbox ##

> [复选框(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][Toggle]

### 引入组件 ###

在`quasar.config.js`中引入`QToggle`

### 基本属性 ###

*  `val`，`v-model`是`Array`，会加在`Array`内
 *  `icon`如果底下两个（`checke-icon`、`unchecked-icon`）icon 会被覆盖掉

## 表单组件-Option Group ##

> [选项组option-group][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`
    
    1.  `date`单纯日期
    2.  `time`单纯时间
    3.  `datetime`时间+日期
 *  `minimal`，不显示标题
 *  `min max`，设置能够选择的日期时间范围

<q-datetime v-model="model" type="datetime" max="2019/02/27 2:30"/>

*  `format-model`存储的时间格式，有四种选择：
    
    1.  `auto`2019-02-27T12:01:00.000+08:00
    2.  `date`"2019-02-27T04:00:00.000Z"
    3.  `number`1541044860000
    4.  `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）][WYSIWYG]

在`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`要显示的icon
     *  `tip`小提示
     *  `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旋转按钮 ##

> [旋转按钮（Knob)][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 ##

> [操作表(ActionSheet)][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`组件。

<q-dialog>
        <span slot="title">标题</span>
        <span slot="message">正文</span>
        <span slot="body">主体</span>
        <span slot="buttons">按钮</span>
    </q-dialog>

## 弹窗-Modal ##

> [模态框(Modal)][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 ##

> [通知框（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)][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)][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>

**效果**

![3230802253-5c76cf322af1d_articlex][]

![3925527546-5c76cf322bd69_articlex][]

## CSS Helpers ##

### 空间排版CSS Spacing Classes ###

> [CSS间距类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_CSS Shadows]

### 可视范围CSS Visibility ###

> [可视范围CSS Visibility][CSS Visibility]

### 位置排版CSS Positioning Classes ###

> [CSS定位类CSS Positioning Classes][CSS_CSS Positioning Classes]

## 自定义颜色 ##

> [调色板(Color Palette)][color-palette]

在`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 ###

> [多国语系(I18n)][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]: https://github.com/whjin/make-quasar
[Quasar_Material_IOS]: https://whjin.github.io/blog/2019/02/23/%E4%BD%BF%E7%94%A8Quasar%E8%AE%BE%E8%AE%A1Material%E5%92%8CIOS%E9%A3%8E%E6%A0%BC%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E7%AB%99/
[Quasar Framework]: http://www.quasarchs.com/
[Vue]: https://cn.vuejs.org/
[quasar-extras]: https://github.com/quasarframework/quasar-extras
[1171528228-5c76cf33c9019_articlex]: /images/20220307/956c294cf15c4a88aa4e466a652c8aeb.png
[VueLoader]: https://vue-loader-v14.vuejs.org/zh-cn/configurations/extract-css.html
[2572099372-5c76cf338f9db_articlex]: /images/20220307/0e6e49ecbbd04c38942d5738ef66b6e7.png
[color-palette]: http://www.quasarchs.com/components/color-palette.html
[3743439922-5c76cf33f2d1f_articlex]: /images/20220307/cdda614e71b2471abe2f9703a7549b2b.png
[Carousel]: http://www.quasarchs.com/components/carousel.html
[Flex CSS]: http://www.quasarchs.com/components/flex-css.html
[Popover]: http://www.quasarchs.com/components/popover.html
[Font Awesome]: http://www.fontawesome.com.cn/
[SectionCarousel.vue]: https://github.com/whjin/make-quasar/blob/master/src/pages/Index/SectionCarousel.vue
[src_components_LIcon.vue]: https://github.com/whjin/make-quasar/blob/master/src/components/LIcon.vue
[Cards]: http://www.quasarchs.com/components/card.html
[Parallax]: http://www.quasarchs.com/components/parallax.html
[BreadCrumbs]: http://www.quasarchs.com/components/breadcrumbs.html
[Rating]: http://www.quasarchs.com/components/rating.html
[Field]: http://www.quasarchs.com/components/field.html
[Chips Input]: http://www.quasarchs.com/components/chips-input.html
[Radio]: http://www.quasarchs.com/components/radio.html
[Checkbox]: http://www.quasarchs.com/components/checkbox.html
[Toggle]: http://www.quasarchs.com/components/toggle.html
[option-group]: http://www.quasarchs.com/components/option-group.html
[Datetime Input]: http://www.quasarchs.com/components/datetime-input.html
[Datetime Picker]: http://www.quasarchs.com/components/datetime-picker.html
[WYSIWYG]: http://www.quasarchs.com/components/editor---wysiwyg.html
[Knob]: http://www.quasarchs.com/components/knob.html
[ActionSheet]: http://www.quasarchs.com/components/action-sheet.html
[Modal]: http://www.quasarchs.com/components/modal.html
[Notify]: http://www.quasarchs.com/components/notify.html
[Ajax_Ajax Bar]: http://www.quasarchs.com/components/ajax-bar.html
[Inner Loading]: http://www.quasarchs.com/components/inner-loading.html
[3230802253-5c76cf322af1d_articlex]: /images/20220307/dfc3fdf9041847f3bb40766aafad69b5.png
[3925527546-5c76cf322bd69_articlex]: /images/20220307/7ea3addc86ae4445b687f3ccad3269ac.png
[CSS_CSS Spacing Classes]: http://www.quasarchs.com/components/spacing.html
[CSS_CSS Shadows]: http://www.quasarchs.com/components/shadows.html
[CSS Visibility]: http://www.quasarchs.com/components/visibility.html
[CSS_CSS Positioning Classes]: http://www.quasarchs.com/components/positioning.html
[I18n]: http://www.quasarchs.com/components/internationalization.html