alert 回调_element之Alert 警告
Alert 警告
1,基本用法
用于页面中展示重要的提示信息。
Alert 组件提供四种主题,由type
属性指定,默认值为info
。代码如下:
"成功提示的文案" type="success"> "消息提示的文案" type="info"> "警告提示的文案" type="warning"> "错误提示的文案" type="error">
点击X号关闭提示,不需要自己在写js逻辑很方便,
2,主题
Alert 组件提供了两个不同的主题:light
和dark
。
通过设置effect
属性来改变主题,默认为light
。代码如下:
"成功提示的文案" type="success" effect="dark"> "消息提示的文案" type="info" effect="dark"> "警告提示的文案" type="warning" effect="dark"> "错误提示的文案" type="error" effect="dark">
3,自定义关闭按钮
自定义关闭按钮为文字或其他符号。
在 Alert 组件中,你可以设置是否可关闭,关闭按钮的文本以及关闭时的回调函数。closable属性决定是否可关闭,接受boolean,默认为true。你可以设置close-text属性来代替右侧的关闭图标,注意:close-text必须为文本。设置close事件来设置关闭时的回调。代码如下:
"不可关闭的 alert" type="success" :closable="false"> "自定义 close-text" type="info" close-text="知道了"> "设置了回调的 alert" type="warning" @close="hello"> export default { methods: { hello() { alert('Hello World!'); } } }
4,带有 icon
表示某种状态时提升可读性。
通过设置show-icon
属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。代码如下:
"成功提示的文案" type="success" show-icon> "消息提示的文案" type="info" show-icon> "警告提示的文案" type="warning" show-icon> "错误提示的文案" type="error" show-icon>
根据 type来设置显示的图标样式
5,文字居中
使用 center
属性让文字水平居中。
除了必填的title
属性外,你可以设置description
属性来帮助你更好地介绍,我们称之为辅助性文字。辅助性文字只能存放单行文本,会自动换行显示。(项目中经常用到)代码如下:
"带辅助性文字介绍" type="success" description="这是一句绕口令:黑灰化肥会挥发发灰黑化肥挥发;灰黑化肥会挥发发黑灰化肥发挥。黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
6,带有 icon 和辅助性文字介绍
最后,这是一个同时具有 icon 和辅助性文字的样例。
"成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> "消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> "警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> "错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
以上就是alert组件的介绍,但是项目中用到比较少,一般用到的Message 消息提示 比较多,后面会单独写一篇Message 消息提示。
alert 回调_element之Alert 警告相关推荐
- alert回调_你知道javascript函数的回调怎么用吗?
平常的前端开发工作中,编写js时会有很多地方用到函数的回调. 最简单的例子就是: 以上只能回调没有参数的(除法你事先知道回调的函数的参数),如果函数有未知的函数,就不能如此简单的调用了. 高级方法: ...
- alert 回调_JavaScript中到底什么时候回调函数Callback
什么是回调函数Callback 简单的理解:回调函数是在另一个函数执行完毕后执行的函数 - 因此名称为'call back'. 复杂的理解:在JavaScript中,函数是对象.因此,函数可以将函数作 ...
- alert 回调_立即执行函数与回调函数
立即执行函数 语法:()()(function(){alert(1)})()第一个括号中 输入如何定义一个函数第二个括号 用来调用这个函数传参:第一个括号中传递的是形参第二个括号中传递的是实参 在哪会 ...
- oracle alert.log查找,oracle alert.log位置
Oracle 11g的日志文件(有点变化) 从Oracle 11g 开始,Oracle以XML与传统的文本两种格式提供Alert日志. 新的日志位置由Automatic Diagnostic Repo ...
- js重写alert事件,避免alert弹框标题出现网址
js代码: window.alert = function(msg, callback) {var div = document.createElement("div");div. ...
- 覆盖alert对话框-自制Jquery.alert插件
Javascript 代码: (function ($) {'use strict';window.alert = $.alert = function (msg) {var defaultOpts ...
- html怎么在alert中加标题,js重写alert事件(避免alert弹框标题出现网址)
js代码: window.alert = function(msg, callback) { var div = document.createElement("div"); di ...
- python 获取alert信息并截取alert图片
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 瞧不上alert 老古董?使用alert实现一个精美的弹窗
曾几何时alert陪伴了我很多歌日日夜夜,但现在人们越来越追求高端的技术,其实慢慢的我也都快淡忘了前端的世界里还有alert这么一个伟大的成员. 目录 一.为什么抛弃了alert? 1. 不同浏览器的 ...
最新文章
- Could not install packages due to an EnvironmentError: [Errno 28] No space left on device
- pandas对dataframe的数据列进行随机抽样(Random Sample of Columns)、使用sample函数进行数据列随机抽样
- 在C#中操作XM II
- 解决python中文乱码的方法
- linux java jdk_神级程序员教你如何10分钟在Linux上安装java的JDK?
- Linux中的MySql数据库远程连接
- Photoshop 手动画金标准流程
- Log4j 2使用教程二 【详解】
- php实现第三方邮箱登录_JavaScript实现第三方登录网站原理在这呢
- JavaScript-面试 表单验证
- Linux(Ubuntu)使用日记------ssh远程登录腾讯云
- 【招聘】哈工大讯飞联合实验室2022届提前批校园招聘
- angular自带的一些api_Angular2.0正式版api使用漫谈
- 安卓扁平化之路专题(二)ActionBar的Overlay模式
- 模块化编程和Jigsaw项目最新早期访问版本使用教程
- Apache下的Lua的配置
- Cron在线表达式生成器
- 张正友相机标定matlab,张正友标定、Camera Calibration Toolbox for Matlab
- 2022年最新国产单端口1000M Ethernet PHY简介
- 时钟周期,机器周期,指令周期的区别
热门文章
- 随机森林(Random Forest)为什么是森林?到底随机在哪里?行采样和列采样又是什么东西?
- 自定义服务器怎么调98k,《刺激战场》如何开自定义房间?升级可领房卡,3倍物资98k随便捡...
- python学习之第三课时--基本数据类型及区别,变量
- Gartner 发布《2017 年新兴技术成熟度曲线图》
- java自考真题_自考04747JAVA语言程序设计(一)历年真题试卷下载
- JAVA基础15-Java内部类
- 【Java挠头】继承、抽象、接口、多态、向上转型、向下转型等精妙干货
- 目标检测--Faster R-CNN
- css/js压缩工具
- LeetCode 1108. Defanging an IP Address--C++,Python解法