element-ui中单独引入Message,MessageBox组件的问题
import Message from './src/main.js';export default Message;
·
import Message from './src/main.js';
export default Message ;
引入时:
由于Message组件并没有
install
方法供Vue来操作的,而是直接返回的,因此按照官方文档单独引入的方法是会报错的,需要给 Message 添加 install 方法Message.install = function (Vue, options) { Vue.prototype.$message = Message; }
所有可以使用js方法调用的组件都是使用
Vue.prototype.$xxx = xxx
的格式注册到Vue的原型对象上的。由于在Vue2.x中,根组件是Vue构造函数的实例,而Vue在创建子组件时,会把根组件的原型方法添加到子组件上。
或者:在main.js中引入时,使用
Vue.prototype.$xxx = xxx
的格式注册到Vue的原型对象上;
import MessageBox from 'elemnet-ui';
Vue.prototype.$confirm= MessageBox.confirm;
调用时:
可以使用promise的.then和.catch,或者使用 async...await;
this.$messageBox.confirm('确定删除该项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
try {
let res = await api.deleteReplyInfo(replyId);
//确定时,打印出来的是字符串'confirm' ,
//取消时,打印出来的是字符串'cancel'
if(res !=='confirm'){
return
}
}
} catch (error) {
console.log(error)
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
更多推荐
已为社区贡献2条内容
所有评论(0)