美文网首页
iview Message(全局提示)与Notice(通知提醒)

iview Message(全局提示)与Notice(通知提醒)

作者: 前端新阳 | 来源:发表于2020-12-29 16:54 被阅读0次

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

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

  • top 提示组件距离顶端的距离,单位像素。
  • duration 默认自动关闭的延时,单位秒。
    可以对这两个组件进行全局配置:
  1. 在某个组件中全局配置,只需要在mouted()钩子函数中写入
mounted() {
    this.$Message.config({
      top: 100,
      duration: 3
  });
    this.$Notice.config({
      top: 100,
      duration: 3
    });
}
  1. 在整个项目中全局配置,需要在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');

相关文章

网友评论

      本文标题:iview Message(全局提示)与Notice(通知提醒)

      本文链接:https://www.haomeiwen.com/subject/kbfqoktx.html