element-ui $prompt输入弹框和$confirm确认弹框用法--输入框默认值、校验、阻止关闭等问题
可输入弹框 $prompt
1、默认值、校验
this.$prompt(
'请输入文件夹名称:',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type:"warning", // 图标样式 "warning"|"error"...
inputValue: '输入框默认值',
inputErrorMessage: '输入不能为空',
inputValidator: (value) => { // 点击按钮时,对文本框里面的值进行验证
if(!value) {
return '输入不能为空';
}
},
// callback:function(action, instance){
// if(action === 'confirm'){
// // do something...
// console.log(instance.inputValue);
// }
// }
}).then(({value}) => {
console.log(value);
// TO DO DO ...
}).catch((err) => {
console.log(err);
});
2、阻止弹框关闭:
const msg = 'IP格式不正确!';
const ipReg = new RegExp(/[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$/);
const that = this;
this.$prompt(
'请输入服务器IP(类似:8.8.8.8)',
'提示',
{
inputValidator:(val) =>{
if(!ipReg.test(val)){
return msg;
}
},
// 阻止关闭(beforeClose中如果不调用done()弹框就无法关闭)
beforeClose: (action, instance, done) => {
if(action === 'confirm' && !ipReg.test(instance.inputValue)){
that.$message(msg);
}else{
done();
}
}
}).then(val =>{
// ...
that.$message({type:'success', message:'设置成功'});
})
确认弹框 $confirm
调用方法同上,$confirm不带输入框。
element-ui $prompt输入弹框和$confirm确认弹框用法--输入框默认值、校验、阻止关闭等问题的更多相关文章
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...
- web自动化,selenium 无法清空输入框默认值继续输入
有的页面输入框自带默认值,想要修改里面的内容时,先使用clear()再send_keys(),这种方式无法清除只会在默认值后面追加内容,不是我想要的结果 解决方法: 方法一: 先双击,后直接send_ ...
- extjs ajax 同步 及 confirm 确认提示框问题
//上传文件 uploadModel: function() { if(Ext.getCmp('exup').getForm().isValid()) { var ssn = this.upPanel ...
- vue 下拉框单选、多选以及默认值
背景: 单选框和多选框 都是使用了 el-select,但传给后端的值类型不一样,多选框传的值是 list类型: ['value1','value2'] ,单选框传值和其他类型一样:设置默认值也是如此 ...
- JS基础 浏览器弹出的三种提示框(提示信息框、确认框、输入文本框)
浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...
- 基于js alert confirm样式弹出框
基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- 经验总结:WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- $.messager.confirm修改弹出框按钮提示文字
$.messager.confirm 默认提示语为“OK”和“Cancel”.引入中文控件后变为“确定”和“取消” <script src="../js/locale/easyui-l ...
- js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
随机推荐
- 异常:java.lang.reflect.InvocationTargetException
在产生这个问题的时候,以为是代码某个类又改动了.但是对比了git,发现并没有改动,测试环境代码照跑,故又重新拉了一份重新部署,仍然报同样的错.解决过程中,试了以下网上各种方法,均无效果. 1.包重复. ...
- Q:群晖磁盘断电导致,无法访问系统分区
1.群晖磁盘断电导致,无法访问系统分区 2.点击存储空间管理员-总览-点击修复 3.存储空间-文件系统检查-重启 4.重启后正常
- 线性空间与线性基(待整修,现在是史,OIwiki上的史。)
各代数结构定义 群 对于一个集合 \(G\) 和运算 \(\times\),若其满足:封闭性.结合律,具有单位元,对于每个元素都有逆元,则称呼 \((G,\times)\) 为一个群. 阿贝尔群,或交 ...
- linux mint安装hadoop
一.安装 安装ssh openssh-server 配置jdk环境变量~/.bashrc参考 export JAVA_HOME=/opt/jdk1.7.0_55/ export JRE_HOME= ...
- 6.App.vue配置
1.修改<div id="app">指定动态路由,可以设置导航栏 <div id="app"> <!-- 导航栏 --> & ...
- 三种方式从jdbc中获取数据库表字段信息
一.整体代码 1.method1:执行select语句获取,select * from dims where 1 = 2 2.method2:执行show create table获取,show cr ...
- 用python做时间序列预测二:时间序列的一般数据格式和可视化
本文将介绍如何通过python来读取.展现时间序列数据. 读取 时间序列数据一般用cvs等电子表格的形式存储,这里以cvs为例: from dateutil.parser import parse f ...
- 你的边比较松弛:最短路的 Bellman-Ford 和 SPFA 方法
Dijkstra 的局限性 在带权图的最短路径问题中,我们的目标是从一个起点出发,找到到达其他所有节点的最短路径.无论是交通导航中的最短耗时路线,还是金融网络中的最小成本路径,这一问题的核心始终是如何 ...
- 你还不会使用Pycham Remote development 打开远程主机工作目录吗?这篇文章帮你解决!
前言 必备: 本地开发机与远程主机都要安装Pycharm专业版!!! 废话不多说直接开始!! 1.打开pycharm 2.依次点击File.Remote Development 3.依次点击SSH.N ...
- Markdown 编写技巧汇总(二)
继续上篇汇总 附-上篇汇总,接着做更加高级一点的应用技巧. [1]列表与引言嵌套 两者嵌套,如: > 我是一行文本 > 1. 文本1 > 2. 文本2 > 1. 文本 > ...