在使用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数据库学习

    1,服务端和客户端 MySQL 包括服务端和客户端,服务端是MySQL server,客户端包括命令行客户端和图形用户客户端: 命令行客户端:mysql,mysqladmin,mysqldump  ( ...

  2. ios 报错记录

    1. 运行xcode 报错:unterminated conditional directive #ifdef 缺少对应的#endif 在结尾加上就好了 2.iOS添加非(c,c++)文件引发的&qu ...

  3. LC 969. Pancake Sorting

    Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...

  4. 有关react-native的最常用的库(文件、样式、UI组件)

    一.对文件的处理 1.react-native-fs 2.react-native-file-selector 3.MaterialFilePicker 二.React-Native 样式指南 1.r ...

  5. Fragment入门代码

    让一个activity和加载多个布局文件 package com.example.fragment; import android.app.Activity; import android.app.F ...

  6. k8s-高可用多主master配置

    准备主机 centos7镜像 node1: 192.168.0.101 node2: 192.168.0.102 node3: 192.168.0.103 vip: 192.168.0.104 配置s ...

  7. MATLAB学习(九)系统聚类

        >> X=rand(100,2); >> Y=pdist(X,'euclidean'); >> Z = linkage(Y,'average'); > ...

  8. Spring Boot启动的报错 Stopping service [Tomcat]

    我遇到的问题是项目中使用java_websocket的WebSocketClient,由于性能要求,需要再Controller直接继承WebSocketClient, 在项目启动过程中调试进入spri ...

  9. 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 ...

  10. python+Selenium PhantomJS网页截图

    PhantomJS是一个基于webkit的JavaScript API.它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码.任何你可以在基于webki ...