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
});