iview Message(全局提示)与Notice(通知提醒)全局配置方法
2024-08-31 20:10:02
在使用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
});最新文章
- 开坑Java编写Json解析器，简明教程
- C#中常用的读取xml的几种方法(转)
- ROS学习笔记（七）——节点
- android 各种xml资源的引用方式
- OAuth2授权页面state参数的设计
- HDU-2844 Coins(多重背包)
- 必备：常用px,pt,em换算表(转)
- Java复习笔记--java中this 关键字
- Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径
- offsetWidth与scrollLeft
- Jquery 右键菜单(ContextMenu)插件使用记录
- 欧几里得旅行商问题 java与c++实现
- Eclipse下设置github开发环境
- [转] 属性选择器.mark
- nginx+uwsgi+WSGI applications
- Google Go 语言从入门到应用必备开源项目
- java 多线程，T1 T2 T3 顺序执行
- Memcached原理与应用
- 一个MySQL视图的优化过程
- 初步认识Angulajs