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数据库学习
1,服务端和客户端 MySQL 包括服务端和客户端,服务端是MySQL server,客户端包括命令行客户端和图形用户客户端: 命令行客户端:mysql,mysqladmin,mysqldump ( ...
- ios 报错记录
1. 运行xcode 报错:unterminated conditional directive #ifdef 缺少对应的#endif 在结尾加上就好了 2.iOS添加非(c,c++)文件引发的&qu ...
- LC 969. Pancake Sorting
Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...
- 有关react-native的最常用的库(文件、样式、UI组件)
一.对文件的处理 1.react-native-fs 2.react-native-file-selector 3.MaterialFilePicker 二.React-Native 样式指南 1.r ...
- Fragment入门代码
让一个activity和加载多个布局文件 package com.example.fragment; import android.app.Activity; import android.app.F ...
- k8s-高可用多主master配置
准备主机 centos7镜像 node1: 192.168.0.101 node2: 192.168.0.102 node3: 192.168.0.103 vip: 192.168.0.104 配置s ...
- MATLAB学习(九)系统聚类
>> X=rand(100,2); >> Y=pdist(X,'euclidean'); >> Z = linkage(Y,'average'); > ...
- Spring Boot启动的报错 Stopping service [Tomcat]
我遇到的问题是项目中使用java_websocket的WebSocketClient,由于性能要求,需要再Controller直接继承WebSocketClient, 在项目启动过程中调试进入spri ...
- Delphi 10.2.3 精简版自动激活Embarcadero Delphi 10.2.3 v25.0.29899.2631 Lite v14.4
下载:https://maxwoods.ctfile.com/u/758954/28516301 Embarcadero.Delphi.10.2.RTM.v25.0.26309.314.Lite.v1 ...
- python+Selenium PhantomJS网页截图
PhantomJS是一个基于webkit的JavaScript API.它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码.任何你可以在基于webki ...