Encapsulando el componente snackbar de vuetify, aparece "TypeError: No se puede leer la propiedad'bar 'de undefined"
El valiente va directo a la respuesta
El primero es el código vue encapsulado
<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 en el mismo directorio
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
Finalmente, el componente de notificación se introduce en main.js
import Notify from './components/notify'
Vue.use(Notify)
Bueno, después de la larga situación, ingresaremos a la línea principal.
En este momento, aparecerá la consola. TypeError: No se puede leer la propiedad 'barra' de indefinido.
Solución
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
Esta es solo mi humilde opinión, si hay alguna mejor manera de sugerirlo.