VUE开发--Vuetify组件（二十五）

2019-08-10 本文已影响102人无剑_君

一、Vuetify组件

&emps;&emps;一个vue ui库，提供vue组件供使用。根据 Google Material Design 指南实现（https://material.io/）。Vuetify支持SSR(服务端渲染)，SPA(单页应用程序)，PWA(渐进式web应用程序)和标准HTML页面。
https://vuetifyjs.com/en/getting-started/quick-start
官网地址：
https://vuetifyjs.com/en/components/dividers

源码查看

二、组件安装

npm install vuetify --save
图标安装：
npm install material-design-icons-iconfont -D

三、Vuetify组件引入

main.js

import Vuetify from 'vuetify'
//图标
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify)

index.js

  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

四、Vuetify组件使用

 <v-app>
内容
</v-app>

所有其他组件都是写在 <v-app></v-app> 之间的，通常是在这页定义出整个应用的模版，比如 sidebar，navigation bar 和主要区域。然后再根据不同的页面，创建不同的 .vue 文件，通常每个页面都是一个单独的文件，有公用的模块可以写在一个地方。

v-card卡片
v-card组件是一个多功能组件，可用于从面板到静态图像的任何事物。card组件有许多辅助组件，使标记尽可能简单。没有列出选项的组件使用Vue的功能组件选项来加快渲染速度，并作为标记糖来使构建更容易。
一个卡片有四个基本组件，v-card-media、v-card-title、v-card-text和v-card-actions。卡片v-card包含四个基本组件说明：
（1）v-card-media：一般放图片或视频；
（2）v-card-title：卡片的标题，一般位于卡片顶部；
（3）v-card-text：卡片的文本（主体内容），一般位于卡片正中；
（4）v-card-action：卡片的按钮，一般位于卡片底部；

<template>
  <div id="app">
    <v-app>
      <v-card>
        <!-- 卡片的头部 -->
        <v-card-title>
          <v-btn color="primary">新增</v-btn>
        </v-card-title>
        <!-- 分割线 -->
        <v-divider/>
        <!--卡片的中部-->
        <v-data-table
          :headers="headers"
          :items="brands"
          :search="search"
          :pagination.sync="pagination"
          :total-items="totalBrands"
          :loading="loading"
          class="elevation-1"
        >
          <template slot="items" slot-scope="props">
            <td>{{ props.item.id }}</td>
            <td class="text-xs-center">{{ props.item.name }}</td>
            <td class="text-xs-center">
              <img :src="props.item.image">
            </td>
            <td class="text-xs-center">{{ props.item.letter }}</td>
            <td class="justify-center layout">
              <v-btn color="info">编辑</v-btn>
              <v-btn color="warning">删除</v-btn>
            </td>
          </template>
        </v-data-table>
      </v-card>
    </v-app>
  </div>
</template>

显示效果

栅格v-layout
Vuetify拥有一个12点的栅格系统，它使用flex-box构建，栅格用于布局应用程序的内容。它包含5种类型的媒体断点，用于定位特定的屏幕大小或方向。栅格组件的属性实际上是从它们定义的属性派生的类，这允许您轻松地将这些辅助类指定为属性，同时仍然提供在任何地方使用的类；其实vuetify的栅格与bootstrap的栅格系统是类似的。
其中v-layout就是对应栅格中的一行，而v-flex对应的就是一列；

 <v-layout row wrap>
  一行内容
 </v-layout>

水平卡片v-flex
使用v-flex，您可以创建自定义的水平卡片。使用contain属性来缩小v-card-media以适应容器内部，而不是覆盖。

<template>
  <div id="app">
    <v-app>
      <v-layout class="px-4 pb-3">
        <!-- 列 -->
        <v-flex xs2>
          <v-btn class="info">新增品牌</v-btn>
        </v-flex>
        <!-- 间隔 -->
        <v-spacer/>
        <v-flex xs6>
          <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-flex>
      </v-layout>
    </v-app>
  </div>
</template>

代码中的px-4表示x轴边距为4，pb-3表示底部边距为3；以及 <v-spacer />表示自动填充。

v-btn按钮
在UI组件中v-btn组件是用一个material design主题和多个选项来替换标准的html按钮。任何色彩辅助类都可以用来改变背景或文字的颜色。
v-btn按钮常用属性：
（1）flat：移除按钮的背景色，布尔值类型，默认为false；
（2）icon：将按钮指定为图标——原型和平面，布尔值类型，默认为false；
（3）small：小型按钮，布尔值类型，默认为false；

<template>
  <div id="app">
    <v-app>
      <v-btn color="info" small>修改</v-btn>
      <v-btn color="error" large>刪除</v-btn>
      <v-btn flat icon color="info">
        <v-icon>edit</v-icon>
      </v-btn>
      <v-btn flat icon color="error">
        <v-icon>delete</v-icon>
      </v-btn>
    </v-app>
  </div>
</template>

按钮

v-text-field文本
v-text-field文本框组件用于收集用户提供的信息。
v-text-field文本框组件常用属性
（1）append-icon：在文本框后面追加一个图标，默认为String类型；
（2）counter：为输入长度创建一个计数器，如果未指定数字，则默认为25，不会应用任何验证；类型为boolean|number|string；
（3）disabled：布尔类型boolean不可见；
（4）multi-line：是否转为文本域，默认是false。文本框和文本域可以自由切换；
（5）name：字段名，表单中会用到；
（6）label：提示文字，输入框的标签；
（7）value：值。可以用v-model代替，实现双向绑定。
（8）hide-details：表示隐藏文本框底部错误信息。
（9）required：是否为必填项，如果是，会在label后加*，不具备校验功能。默认是false；
（10）rows：文本域的行数，multi-line为true时才有效；
（11）single-line：是否单行文本显示，默认是false。

<template>
  <div id="app">
    <v-app>
      <v-flex xs6>
        <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
      </v-flex>
    </v-app>
  </div>
</template>

搜索

v-dialog对话框
v-dialog 组件用来通知用户有关特定任务的信息，并且可能包含重要信息，需要作出决定或者涉及多任务；应谨慎使用对话框，因为它是中断的。
v-dialog 组件常用属性
（1）max-width：限制宽度；
（2）v-model：value值双向绑定到show变量，用来控制窗口显示；
（3）persisitent：控制窗口不会被意外关闭，布尔类型，默认值为false
（4）scrollable：当包含card, card-title, card-text 以及 card-actions这几个的对话框可滚动设为 true 的时候；card-text 应该指定高度并且设置 overflow-y；布尔类型，默认值为false。

<template>
  <div id="app">
    <v-app>
      <!--弹出的对话框-->
      <v-dialog v-model="dialog" width="500">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">新增内容</v-btn>
        </template>
        <v-card>
          <!--对话框的标题-->
          <v-card-title class="headline grey lighten-2" primary-title>主要内容</v-card-title>
          <v-card-text>对话框测试</v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" flat @click="dialog = false">确定</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      dialog: false
    };
  }
};
</script>

对话框

注意：我们需要在data中定义show与v-dialog组件中的show进行双向绑定
show: false,//是否显示对话框

data-tables组件
v-data-table 用于显示表格数据，功能包括排序、搜索、分页、行内编辑、头部提示以及行选择。而我们在实际应用中使用最多的就是服务端分页和排序，如果你从后台加载数据，并希望显示结果之前进行分页和排序，你可以使用 total-items 属性。定义这个属性将会禁用内置的分页和排序，并且你需要使用 pagination 属性来监听变化。使用 loading 属性来显示获取数据时的进度条。

v-data-table核心属性：
（1）headers：定义表头的数组，数组的每个元素就是一个表头信息对象，结构：

{
  text: string, // 表头的显示文本
  value: string, // 表头对应的每行数据的key
  align: 'left' | 'center' | 'right', // 位置
  sortable: boolean, // 是否可排序
  class: string[] | string,// 样式
  width: string,// 宽度
}

（2）items：表格的数据的数组，数组的每个元素是一行数据的对象，对象的key要与表头的value一致。
（3）loading：是否显示加载数据的进度条，默认是false；
（4）total-items：分页的总条数信息，number类型，无默认值；
（5）pagination.sync：包含分页和排序信息的对象，将其与vue实例中的属性关联，表格的分页或排序按钮被触发时，会自动将最新的分页和排序信息更新。对象结构：

{
    page: 1, // 当前页
    rowsPerPage: 5, // 每页大小
    sortBy: '', // 排序字段
    descending:false, // 是否降序
}

（6）select-all ：是否显示每一行的复选框，Boolean类型，无默认值；
（7）no-data-text：当没有查询到数据时显示的提示信息，string类型，无默认值；
（8）dark：是否使用黑暗色彩主题，默认是false；
（9）expand：表格的行是否可以展开，默认是false。
（10）search：搜索过滤字段。

五、服务端分页模板

官网服务端分页


<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
      :pagination.sync="pagination"
      :total-items="totalDesserts"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </div>
</template>

Vue自动遍历传递过来的items属性，并把得到的对象传递给这个段template中的props.item属性。但是需要注意的是给items和totalitems赋值；
当pagination变化时，重新获取数据，再次给items和totalitems赋值。

分页属性
（1）pagination.sync属性说明
首先我们发现pagination包含分页以及排序信息的对象。有下属性：
page当前页，也就是当前第几页；
rowsPerPage表示每页多少条记录；
sortBy表示分页字段；
descending：是否降序；
totalItems表示总条数，一般是后台传递给前台。
【需要注意】我们在前台页面选择分页方式需要采用watch对pagination对象进行监控。

 watch:{
      key(){
        this.loadBrands();
      },
      pagination:{
        deep: true,//深度監控
        handler(){
          this.loadBrands();
        }
      }
    },
 methods:{
      loadBrands(){
       this.$http.get("/brands/page",{ params:{
          page: this.pagination.page,//当前页
          row: this.pagination.rowsPerPage,//每页大小
          sortBy: this.pagination.sortBy, //分页字段
           desc: this.pagination.descending,//第几页
           key: this.key,//查询条件
         }
       }).then();
        }
    }
    }

以上代码发出的请求是http://api.leyou.com/api/brands/page?page=1&row=25&sortBy=id&desc=true&key=zhagnsan

示例：


<template>
  <div>
    <v-app>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">
            <img :src="props.item.image" alt>
          </td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">修改/刪除</td>
        </template>
      </v-data-table>
    </v-app>
  </div>
</template>
 
<script>
export default {
  name: "MyBrand",
  data() {
    return {
      totalBrands: 0, //
      brands: [], //数组，就是个数组，对应组件中的item
      loading: false,
      pagination: {}, //空對象
      headers: [
        //headers表头数组，里面是对象
        {
          text: "品牌id", //显示文本
          align: "center", //left，center，rights三种对其方式
          sortable: true, //是不是需要排序
          value: "id" //value这个头关联的字段
        },
        { text: "品牌名称", align: "center", value: "name", sortable: false },
        { text: "品牌Logo", align: "center", value: "image", sortable: false },
        { text: "首字母", align: "center", value: "letter", sortable: false },
        { text: "操作", align: "center", sortable: false }
      ]
    };
  },
  created() {
    this.brands = [
      { id: 1, name: "小米", image: "2.jpg", letter: "X" },
      { id: 2, name: "華為", image: "", letter: "H" },
      { id: 1, name: "Apple", image: "", letter: "A" },
      { id: 1, name: "三星", image: "", letter: "S" }
    ];
    this.totalBrands = 15;
  }
};
</script>

分页显示

六、v-form表单及校验

v-form表单
v-form的属性和方法
v-form表单的常用属性：
（1）lazy-validation：如果启用，value将永远是 true ，除非有可见的验证错误。您仍然可以调用validate()来手动触发验证；布尔类型，默认值为false。
（2）value：true，代表表单验证通过；false，代表表单验证失败；布尔类型，默认值为false。
v-form的常用方法
（1）validate：校验整个表单数据，前提是你写好了校验规则。返回Boolean表示校验成功或失败。
（2）reset：重置表单数据。

<template>
  <v-app>
    <v-form ref="form" v-model="valid" lazy-validation>
      <v-text-field v-model="name" :rules="nameRules" :counter="10" label="姓名" required></v-text-field>
      <v-text-field v-model="email" :rules="emailRules" label="E-mail" required></v-text-field>
      <v-select v-model="select" :items="items" :rules="[v => !!v || '必须填加']" label="内容" required></v-select>
      <v-checkbox v-model="checkbox" :rules="[v => !!v || '接受并继续!']" label="你接受吗?" required></v-checkbox>

      <v-btn :disabled="!valid" @click="submit">提交</v-btn>
      <v-btn @click="clear">清除</v-btn>
    </v-form>
  </v-app>
</template>
 
<script>
export default {
  name: "MyBrand"
};
</script>