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

根据api 官方文档:

给出的message的提示:

this.$Message.config({
    top: 50,
    duration: 3
});
属性 说明 类型 默认值
top 提示组件距离顶端的距离,单位像素 Number 24
duration 默认自动关闭的延时,单位秒 Number 1.5
在使用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
});

如果想改变message的top高度为页面的中间位置:

可以在sytle.css 里面全局加一个样式:

.ivu-message {
    top: 50% !important;
}
发布了133 篇原创文章 · 获赞 44 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/qq_41646249/article/details/103733542