vuetifyjs-auxiliary

vuetifyjs-auxiliary最初是起源是为了弥补使用vuetifyjsUI的情况下的不足，但是使用场景并不仅仅局限于vuetifyjs中。主要的功能有

结尾有“*”号的功能需配合vuetifyjs使用

1. toast功能，目前支持四个角弹出提示框
2. loading功能
3. format命令函数，目前仅提供格式化时间功能
4. Text-field指令 v-remove-message 移除text-field多余的高度 配合dense属性使用将高度降到最低*
5. x-tab组件
6. websocket支持库 （计划加入）
7. confirm 功能，确认框

更多功能说明请参考我的博客 https://www.zyt8.cn

开始使用

安装

npm install --save vuetifyjs-auxiliary

引入

main.js

import Vue from 'vue'
import VuetifyjsAuxiliary from 'vuetifyjs-auxiliary'
import 'vuetifyjs-auxiliary/lib/vuetifyjs-auxiliary.css'

Vue.use(VuetifyjsAuxiliary)

使用方法

toast

<template>
	<div @click="showToast">hello world</div>
</template>
<script>
export default {
  name: 'component',
  methods: {
    showToast() {
      // 打开一个toast
      this.$toast({
        title: '',
        message: '',
        position: 'top-right',
        duration: 1 // 1秒后关闭
      })
    }
  }
}
</script>

loading

<template>
	<div @click="showLoading">hello world</div>
</template>
<script>
export default {
  name: 'component',
  methods: {
    showLoading() {
      // 打开一个loading状态
      const closeLoading = this.$loading();
      setTimeout(() => {
        // 3秒后，关闭loading状态
        closeLoading();
      }, 3000)
    }
  }
}
</script>

confirm

<template>
	<div @click="showConfirm">hello world</div>
</template>
<script>
export default {
  name: 'component',
  methods: {
    showConfirm() {
      // 打开一个confirm
      this.$confirm({
        title: '确认删除？',
        content: '您确认删除该文件吗？',
        okText: '确认',
        cancelText: '取消'
      }).then(() => {
        // 确认删除
      }).catch(() => {
        // 取消删除
      })
    }
  }
}
</script>