Всем здравствуйте!
Не могу понять - почему возникают ошибки [Vue warn]: Unknown custom element: <v-dialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Пытаюсь сделать плагин с использованием vuetify, код плагина
import Vue from 'vue';
import vuetify from "vuetify";
const dialog = {
name:'askdialog',
vuetify,
data:{
askDialog:false,
dialogTitle:'',
dialogMessage: '',
dialogType:'alert'
},
computed:{
buttons(){
switch (this.dialogType) {
case 'confirm':
return [
{title:'OK', icon:'done', command: 'ok'},
{title:'Отмена', icon:'close', command: 'cancel'},
]
case 'ask':
return [
{title:'Да', icon:'done', command: 'ok'},
{title:'Нет', icon:'close', command: 'cancel'},
]
default:
return [
{title:'OK', icon:'done', command: 'ok'},
]
}
}
},
template:' <v-dialog width="500px" v-model="askDialog">\n' +
' <v-card>\n' +
' <v-card-title class="primary" dense primary-title>\n' +
' {{dialogTitle}}\n' +
' </v-card-title>\n' +
' {{dialogMessage}}\n' +
' <v-toolbar dense>\n' +
' <v-spacer></v-spacer>\n' +
' <v-btn v-for="btn in buttons" @click="$emit(btn.command)">\n' +
' <v-icon>{{btn.icon}}</v-icon>\n' +
' {{btn.title}}\n' +
' </v-btn>\n' +
' </v-toolbar>\n' +
' </v-card>\n' +
' </v-dialog>\n'
}
export default {
install(Vue, el){
this.el = el
this.instance = null
Vue.prototype.$dialog=this
},
_checkInstance(){
if(this.instance===null){
this.instance = new Vue(dialog)
this.instance.$mount('#'+this.el)
}
},
alert(title, message, callback){
this._checkInstance()
this.instance.$data.dialogTitle = title
this.instance.$data.dialogMessage = message
this.instance.$data.dialogType = 'alert'
this.instance.$data.askDialog = true
}
}
в main.js
import askdialog from "./plugins/askdialog";
Vue.use(askdialog,'ask') // ask - id элемента div, куда будет монтироваться
Суть плагина:
добавляет в Vue.prototype $dialog, у которого будут методы alert, confirm и ask.
Суть методов - отобразить модальное окно с предопределенным для каждого метода набором кнопок.
Причина использования vuetify - в проекте он уже используется и мне понравились его модальные окна - на самом деле модальные, табом по элементам под окном не походишь
Использование - this.$dialog.alert('Заголовок','текст сообщения',callback). До реализации колбэка дело пока не дошло
Для корректного использование в корневом шаблоне есть div с id, этот id передается в плагин и в него, по задумке, должно производится монтирование экземпляра Vue, который создает плагин.
Все вроде хорошо, кроме одного - как только выполняется $mount - так сразу в консоль сыпятся сообщения об ошибках о неопознанных кастомных элементах. Вроде и в проекте vuetify используется и в плагине его подключаю - все равно идут ошибки.
Почему это происходит?
Простой