iview Message(全局提示)与Notice(通知提醒)全局配置方法

在使用iview 的Message与Notice组件时，可以对提示框的显示位置与显示时长进行配置。

iview提供了两个配置属性。分别是：

• top 提示组件距离顶端的距离，单位像素。
• duration 默认自动关闭的延时，单位秒。

可以对这两个组件进行全局配置:

//在某个组件中全局配置，只需要在mouted()钩子函数中写入

mounted() {

    this.$Message.config({

      top: 100,

      duration: 3

  });

    this.$Notice.config({

      top: 100,

      duration: 3

    });

}

//在整个项目中全局配置，需要在main.js中写入

Vue.prototype.$Message.config({

    top: 100,

    duration: 3

});

Vue.prototype.$Notice.config({

    top: 50,

    duration: 3

});

简单点

全局注册iView

import iView from 'iview'

Vue.use(iView)

使用

方式一 在vue组件中使用

this.$Message.info('This is a info tip');

this.$Message.success('This is a success tip');

this.$Message.warning('This is a warning tip');

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

方式二 在js文件中使用

import { Message } from 'iview'

Message.info('hello');

Message.success('hello');

Message.warning('hello');

Message.error('hello');

配置

全局配置

main.js

Vue.prototype.$Message.config({

  top: 70,

  duration:2

});

局部配置

局部配置中设置高度无效

this.$Message.info({

    content: 'I'll be gone in 10 seconds',

    duration: 10,

    closable: true

});