vuetify UI使用

[starryiu]

记录一些 vuetify UI 使用方法。vuetify 作为 ui 框架非常简洁、而且官方也在持续不断的更新中，还是非常推荐学习的。~原文时间：2020-10-20 22:01~

vue-cli快速安装

vue add vuetify

使用中文

//引入中文文件
import { zhHans } from 'vuetify/lib/locale'

//添加到Vuetify配置中
export default new Vuetify({
	lang: {
		current: `zhHans`,
		locales: { zhHans }
	}
})

使用图标

Material icons

安装

yarn add material-design-icons-iconfont -D

在配置文件中引入

import 'material-design-icons-iconfont/dist/material-design-icons.css'

使用

local_hospital

查看更多可用图标

Font Awesome

安装

yarn add [email protected] -D

在配置文件中引入

import 'font-awesome/css/font-awesome.min.css'

使用

fa-id-badge

查看更多可用图标

#样式和动画

颜色

对于background-color 颜色： pink 亮度： lighten-4

对于字体color 颜色： pink--text 亮度： text--lighten-4

字体

对齐

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

划线

删除线：text-decoration-line-through

text-decoration-overline

text-decoration-underline

不换行

.text-no-wrap

过渡效果

一个简单的x轴滑动过渡效果

  <v-slide-x-transition>
    <v-card outlined tile v-if="isShow">
      <v-card-title>我是一个卡片标题</v-card-title>
    </v-card>
  </v-slide-x-transition>
  <v-btn color="primary" @click="isShow = !isShow">切换</v-btn>

自带的组件提供了transition属性，可以直接写tranistion的name名称，以下是个例子

  <div class="text-center" transition="slide-x-transition">
    <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on">
          Dropdown
        </v-btn>
      </template>
      <v-list>
        <v-list-item v-for="(item, index) in items" :key="index" @click=""> 
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>

也可以自定义过渡效果

import Vue from 'vue'
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'

const myTransition = createSimpleTransition(`my-transition`)

Vue.component(`my-transition`, myTransition)

//style
.my-transition-leave-active,
.my-transition-enter-active {
  transition: all 1s;
}
.my-transition-enter,
.my-transition-leave-to {
  opacity: 0;
}
//html
  <my-transition>
    <v-card outlined tile v-if="isShow">
      <v-card-title>卡片标题</v-card-title>
    </v-card>
  </my-transition>
  <v-btn color="primary" @click="isShow = !isShow">切换</v-btn>

组件

由于组件太多了，所以只介绍几个平时用的多的

栅格

vuetify 内置栅格位 12 点栅格系统

在手机屏幕下一行一个，其他情况一行两个卡片

<v-row no-gutters>
  <v-col cols="12" sm="6" class="my-sm-0 my-2">
    <v-card class="pa-2" outlined tile>
      栅格
    </v-card>
  </v-col>
  <v-col cols="12" sm="6" class="my-sm-0 my-2">
    <v-card class="pa-2" outlined tile>
      栅格
    </v-card>
  </v-col>
</v-row>

数据表格

数据表格使用起来非常简单，只要准备好渲染的数据就行了。 通常必要的数据是header和items，即表头数据和行数据。

headers: [
	{ text: `姓名`, value: `name` },
	{ text: `性别`, value: `gender` },
	{ text: `年龄`, value: `age` }
],
items: [
	{ name: `小明`, gender: `男`, age: 12 },
	{ name: `小红`, gender: `女`, age: 22 },
	{ name: `小刚`, gender: `男`, age: 34 }
],

行选择框

  <v-data-table
    show-select
    item-key="name"
    single-select
    :headers="headers"
    :items="items"
  ></v-data-table>

行选择框必须设置 item-key 属性