Vuetify 二次封装全局消息条SnackBar组件

个人博客同步csdn

1. 文件结构

在components中建立一个SnackBar文件夹，其中有一个index.js和SnackBar.vue文件（只是示例，并非必须这样放）

2. SnackBar.vue

<template>
    <v-app>
        <v-snackbar v-model="visibility" :timeout="time" top right :color="color">
            {{ text }}
        </v-snackbar>
    </v-app>

</template>

<script>
    export default {
        name: "SnackBar",
        data() {
            return {
                visibility: false,
                time: 3000,
                color: 'primary',
                text: ""
            }
        }
    }
</script>

<style scoped>

</style>

3. index.js

import Vue from 'vue'
import SnackBar from './SnackBar.vue'
import Vuetify from 'vuetify/lib';

const SnackBarConstructor = Vue.extend(SnackBar)

const bar = function () {
    const instance = new SnackBarConstructor({
        data: {
            visibility: false,
            time: 3000,
            color: 'blue',
            text: ""
        }
    })
    //这个得有，不然vuetify会主题出问题
    instance.$vuetify = new Vuetify().framework
    instance.$mount('#app')
    document.body.appendChild(instance.$el)

    instance.show = (options) => {
        instance.visibility = true
        instance.time = options.time ?? 3000
        instance.color = options.color ?? "blue"
        instance.text = options.text ?? options
    }
    return instance
}

export default bar()

4. main.js 注册

在main.js中把组件挂载上去，但是我喜欢像下面这样直接把方法挂上去这样调用可以少写一步

5. 调用

如果是在vue页面中，如图直接用this调用即可

如果是普通的js文件的话，先引入vue，然后Vue.prototype.xxx这样调用即可！

4.遇到的问题

最开始写好后虽然可以用，但是样式有问题，比如不能更改颜色，按钮点击也有问题，需要在组件内包裹一层<v-app></v-app>，并且 在index.js中加上

instance.$vuetify = new Vuetify().framework