在使用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
});

iview Message(全局提示)与Notice(通知提醒)全局配置方法的更多相关文章

  1. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  2. Ubuntu gitlab安装文档及邮件通知提醒配置

    1.安装依赖包,运行命令 sudo apt-get install curl openssh-server ca-certificates postfix 2.由于gitlab官方源可能被“墙”,首先 ...

  3. 一个vue的全局提示框组件

    <template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...

  4. Azure Data Factory(四)集成 Logic App 的邮件通知提醒

    一,引言 上一篇有介绍到使用Azure Data Factory 复制数据,然后有集成 Azure DevOps 实现CI/CD,但是对于真正的项目来说,这些肯定是不够的,比如说在执行 Azure P ...

  5. element组件dialog关闭时Message消息提示抖动问题

    在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下. 在页面有滚动条的情况先打开dialog时, ...

  6. Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)

    介绍: 一星期从入门到实际开发经验分享及总结           代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...

  7. IE下全局对象报 脚本错误提示“对象不支持此属性或方法”解决方案

    原来是IE会把页面中的元素id可以直接当变量名一样使用,但是这个id变量不能被赋值. 例如: <body id='body'> <script type="text/jav ...

  8. 全局获取 (Activity)Context,实现全局弹出 Dialog

    为什么需要一个全局的 (Activity)Context 需求1:在进入 app 的时候,要求做版本检测,有新的版本的时候,弹出一个 AlertDialog,提示用户版本更新 需求2:从别的设备挤下来 ...

  9. Message: 'geckodriver' executable needs to be in PATH. 解决方法

    问题描述: 执行如下代码 # coding=utf-8 from selenium import webdriver driver = webdriver.Firefox() driver.maxim ...

随机推荐

  1. MySql数据类型及对应存储空间

    整数型数据类型 类型名称 说明 存储需求 TINYINT 很小的正数 1个字节 SMALLINT 小正数 2个字节 MEDIUMINT 中等大小的正数 3个字节 INT(INTEGER) 普通大小的正 ...

  2. C#调用新浪微博API

    WebRequest wq = WebRequest.Create(this.address); HttpWebRequest hq = wq as HttpWebRequest; string us ...

  3. Leetcode题目48.旋转图像(中等)

    题目描述: 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1 ...

  4. Nginx反向代理设置header

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  5. Arcengine获得arcgis安装的版本

    ESRI.ArcGIS.RuntimeManager.ActiveRuntime.Version  //gsioracle MessageBox.Show(ESRI.ArcGIS.RuntimeMan ...

  6. ubuntu如何删除刚添加的源?

    答: sudo add-apt-repository -r <source_url> 如: sudo add-apt-repository -r ppa:linaro-maintainer ...

  7. React Native真机红屏报错总结

    一.run-android报错:unable to load script from assets 'index.android.bundl' 解决: 1.进入\android\app\src\mai ...

  8. WPF学习笔记 - 如何用WPF创建单实例应用程序

    使用一个已命名的(操作系统范围的)互斥量. bool mutexIsNew; using(System.Threading.Mutex m = new System.Threading.Mulex(t ...

  9. 新导入的项目目录结构不对(main目录)

    Eclipse导入一个maven项目,碰到一个这样的错误:项目的包路径编程了main.java开头的,而java代码中的pakge却是com开头的,如图. 导致项目编译不通过 错误提示: 解决办法: ...

  10. 一百一十七:CMS系统之注册页面对接短信验证码

    from flask import Blueprint, requestfrom exts import alidayufrom utils import restfulfrom utils.capt ...