vuetify的用法

用法同element-ui

1.安装

( 这里安装的是1.5.5的vuetify )

yarn add vuetify@1.5.5   

2.在src下的plugins文件夹下新建一个vuetify.js的文件

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
  iconfont: 'md'
})

3. 在main.js中引入即可

import "@/plugins/vuetify.js"

vuetify（1.5.5版本）中的部分组件用法：

1）. vuetify 消息提示：

<template>
    <div>
        <v-btn @click="alertTipFun">点击提示</v-btn>
         <v-snackbar v-model="snackbar" top :timeout="timeout" :color="sColor">
            {{alertText}}
            <v-btn color="#fff" flat @click="snackbar=false" >Close</v-btn>
       </v-snackbar>
    </div>
</template>
<script>
export default {
  data () {
    return {
      snackbar: false,
      timeout: 2000,
      alertText: '默认',
      sColor: '#199965'
    }
  },
  methods: {
    alertTipFun () {
      this.snackbar = true
      this.alertText = '只是显示信息'
    }
  }
}
</script>  

效果如图：

点击后，显示提示消息：

2). 获取验证码button的倒计时

<template>
    <div>
        <v-btn class="getcode-btn" :disabled="btnDisabled" color="#ececec" @click="getCode" depressed  block > {{btnDisabled ? `${timeDown}s`:"获取验证码"}}</v-btn>
    </div>
</template>
<script>
export default {
  data () {
    return {
      btnDisabled: false,
      timeDown: 60 // 验证码 60秒倒计时
    }
  },
  methods: {
    getCode () {
      this.btnDisabled = true
      // eslint-disable-next-line camelcase
      let down_timer = setInterval(() => {
        this.timeDown--
        if (this.timeDown <= 0) {
          this.btnDisabled = false
          clearInterval(down_timer)
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
    .getcode-btn{
        width:70px;
    }
</style>

效果如图：

3). vuetify的表单及验证

<template>
    <div class="login_outside">
       <br/><br/><br/><br/>
        <h3>密码登录</h3>
        <v-form ref="loginForm"  class="login_form"  lazy-validation >
            <v-text-field v-model="userInfo.phone" :counter="11" :rules="[phoneRules.required,phoneRules.valid]" placeholder="请输入手机号"></v-text-field>
            <v-text-field v-model="userInfo.password" :counter="8" :rules="pwdRules"
            :append-icon="showEye?'mdi-eye':'mdi-eye-off'"
            @click:append="showEye=!showEye"
            :type="showEye?'text':'password'"
            placeholder="请输入密码"
            >
            </v-text-field>
            <v-btn color="#f6f6f6a" block class="submit" depressed @click="loginByPwd">登录</v-btn>
        </v-form>
    </div>
</template>
<script>
export default {
  data () {
    return {
      userInfo: {
        phone: '',
        password: ''
      },
      showEye: false,
      phoneRules: {
        required: v => !!v || '请输入手机号码',
        valid: v => {
          const validates = /^1[3456789]\d{9}$/
          return validates.test(v) || '请输入正确的手机号'
        }
      },
      pwdRules: [
        value => !!value || '请输入密码',
        value => (value && value.length >= 4 && value.length <= 8) || '请输入4到8位的密码'
      ]
    }
  },
  methods: {
    loginByPwd () {
      if (this.$refs.loginForm.validate()) {
        // 这里表示验证通过; 如果不通过，则会触发表单中的所有 rules
      }
    }
  }
}
</script>
<style lang="scss">
     .v-messages__message {
        color: red;
       }
</style>

注：
    1. rules的写法：   将输入值作为参数（  规则中的V就是接收到的输入参数，即v-text-field里面的值  ）, 并返回true/ false或string带有错误消息的函数数组   (规则可自定义，但必须返回)
        1) <v-text-filed :rules="newRules"></v-text-field>
            此时data中定义的newRules： 
            newRules:[
                v=>!!v||"请输入",
                v=>(v&&v.length>=4&&v.length<=8)||"长度4到8"
            ]
         2) <v-text-field :rules="[newRules.required,newRules.valid]"></v-text-field>
             此时 data中定义的newRules:
             newRules:{
                 required:v=>!!v||"请输入",
                 valid:v=>(){
                     // ***这里可以写处理逻辑
                 }
             }    

未输入点击登录，效果如图：