iview按需引用后使用this.$Modal报错
在做需求的时候,需要在点击某处的时候出现一个警告框,于是想到使用iview官方文档的所推荐的Modal对话框来创建一次性的轻量级对话框。main.js中引入了iviewimport { Button, Modal } from 'iview'Vue.component('Button', Button)Vue.component('Modal', Modal)错误信息如下:代...
·
在做需求的时候,需要在点击某处的时候出现一个警告框,于是想到使用iview官方文档的所推荐的Modal对话框来创建一次性的轻量级对话框。
main.js中引入了iview
import { Button, Modal } from 'iview'
Vue.component('Button', Button)
Vue.component('Modal', Modal)
错误信息如下:
代码如下:
<template>
<Button @click="instance('warning')">warning</Button>
<Button @click="instance('success')">Success</Button>
</template>
<script>
export default {
methods: {
instance (type) {
const title = 'Title';
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
switch (type) {
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
}
}
}
}
</script>
原因如下:
引用:this.$Modal.warning()
结果:Uncaught (in promise) TypeError: Cannot read property 'warning' of undefined
原因:打印出来的this.$Modal也是undefined,说明没有声明$Modal
解决方法:
在main.js中$Model声明一下:
Vue.prototype.$Modal = Modal
更多推荐
已为社区贡献7条内容
所有评论(0)