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
});
iview Message(全局提示)与Notice(通知提醒)全局配置方法的更多相关文章
- 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知
需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...
- Ubuntu gitlab安装文档及邮件通知提醒配置
1.安装依赖包,运行命令 sudo apt-get install curl openssh-server ca-certificates postfix 2.由于gitlab官方源可能被“墙”,首先 ...
- 一个vue的全局提示框组件
<template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...
- Azure Data Factory(四)集成 Logic App 的邮件通知提醒
一,引言 上一篇有介绍到使用Azure Data Factory 复制数据,然后有集成 Azure DevOps 实现CI/CD,但是对于真正的项目来说,这些肯定是不够的,比如说在执行 Azure P ...
- element组件dialog关闭时Message消息提示抖动问题
在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下. 在页面有滚动条的情况先打开dialog时, ...
- Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
- IE下全局对象报 脚本错误提示“对象不支持此属性或方法”解决方案
原来是IE会把页面中的元素id可以直接当变量名一样使用,但是这个id变量不能被赋值. 例如: <body id='body'> <script type="text/jav ...
- 全局获取 (Activity)Context,实现全局弹出 Dialog
为什么需要一个全局的 (Activity)Context 需求1:在进入 app 的时候,要求做版本检测,有新的版本的时候,弹出一个 AlertDialog,提示用户版本更新 需求2:从别的设备挤下来 ...
- Message: 'geckodriver' executable needs to be in PATH. 解决方法
问题描述: 执行如下代码 # coding=utf-8 from selenium import webdriver driver = webdriver.Firefox() driver.maxim ...
随机推荐
- MySql数据类型及对应存储空间
整数型数据类型 类型名称 说明 存储需求 TINYINT 很小的正数 1个字节 SMALLINT 小正数 2个字节 MEDIUMINT 中等大小的正数 3个字节 INT(INTEGER) 普通大小的正 ...
- C#调用新浪微博API
WebRequest wq = WebRequest.Create(this.address); HttpWebRequest hq = wq as HttpWebRequest; string us ...
- Leetcode题目48.旋转图像(中等)
题目描述: 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1 ...
- Nginx反向代理设置header
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- Arcengine获得arcgis安装的版本
ESRI.ArcGIS.RuntimeManager.ActiveRuntime.Version //gsioracle MessageBox.Show(ESRI.ArcGIS.RuntimeMan ...
- ubuntu如何删除刚添加的源?
答: sudo add-apt-repository -r <source_url> 如: sudo add-apt-repository -r ppa:linaro-maintainer ...
- React Native真机红屏报错总结
一.run-android报错:unable to load script from assets 'index.android.bundl' 解决: 1.进入\android\app\src\mai ...
- WPF学习笔记 - 如何用WPF创建单实例应用程序
使用一个已命名的(操作系统范围的)互斥量. bool mutexIsNew; using(System.Threading.Mutex m = new System.Threading.Mulex(t ...
- 新导入的项目目录结构不对(main目录)
Eclipse导入一个maven项目,碰到一个这样的错误:项目的包路径编程了main.java开头的,而java代码中的pakge却是com开头的,如图. 导致项目编译不通过 错误提示: 解决办法: ...
- 一百一十七:CMS系统之注册页面对接短信验证码
from flask import Blueprint, requestfrom exts import alidayufrom utils import restfulfrom utils.capt ...