欢迎来到小懒的博客~email:568705236@qq.com

在iview中按需使用Message、Notice

2020/10/7 15:01:21站长

    在iview的官方文档中的快速上手部分,写了如何按需引入单个组件。像Button、Form这些常用组件就很方便也正常引入并使用。但是我们需要使用Message和Notice时,按文档的使用方式

this.$Message.error('This is an error tip');

    这样,一切看上去正常,一运行。就报错,can't not read property 'error' of undefined。

image.png

    根据错误的字面意思,就是$Message对象是未定义的,this下并没有$Message这个属性对象。原因是Message只是一个函数库,在iview的源码里可以看见Message只是一个js文件,并没有vue文件,因此不是vue组件。想使用Message在main.js文件中引入Message挂载到vue的原型链即可使用。

//main.js
import {Message} from 'view design';
Vue.prototype.$Message = Message;
...
<script>

export default{
...
    this.$Message.error('This is an error tip');
...

}
</script>

    同理,Notice也是类似方式使用。



赞赏