[vuetify] 封装vuetify的snackbar组件,出现 “TypeError: Cannot read property ‘bar‘ of undefined“

封装vuetify的snackbar组件,出现 “TypeError: Cannot read property ‘bar’ of undefined”

勇者直奔答案

首先是封装的 vue 代码

<template>
  <v-snackbar v-model="show"
              :color="color"
              :timeout="timeout"
  >
    {{ text }}
    <v-btn dark text
           @click="show = false">
      关闭
    </v-btn>
  </v-snackbar>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      timeout: 3000,
      color: "",
      text: "",
    };
  },
  methods: {
    info(text) {},
    success(text) {},
    error(text) {},
    warning(text) {},
  },
};
</script>

同目录的 index.js

import Snackbar from './Snackbar.vue'

const Notify = {}

Notify.install = function (Vue) {
  const SnackbarConstructor = Vue.extend(Snackbar)
  const instance = new SnackbarConstructor()
  let vm = instance.$mount()
  document.querySelector('body').appendChild(vm.$el)
  Vue.prototype.$notify.info = instance.info;
  Vue.prototype.$notify.error = instance.error;
  Vue.prototype.$notify.warning = instance.warning;
  Vue.prototype.$notify.success = instance.success;
}

export default Notify

最后在 main.js 引入通知组件

import Notify from './components/notify'
Vue.use(Notify)

好了，啰嗦完前情提要进入主线
此时运行会 console 会出现 TypeError: Cannot read property ‘bar’ of undefined

解决方法

import Snackbar from './Snackbar.vue'
import Vuetify from 'vuetify/lib'; // <---- add  如果 vuetify 有特殊配置可以引入自定义的文件

const Notify = {}

Notify.install = function (Vue) {
  const SnackbarConstructor = Vue.extend(Snackbar)
  const instance = new SnackbarConstructor()
  instance.$vuetify = new Vuetify().framework; // <---- add
  let vm = instance.$mount()
  document.querySelector('body').appendChild(vm.$el)
  Vue.prototype.$notify.info = instance.info;
  Vue.prototype.$notify.error = instance.error;
  Vue.prototype.$notify.warning = instance.warning;
  Vue.prototype.$notify.success = instance.success;
}

export default Notify

这只是个人愚见，如果有什么更好的方法可以提出来