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 ...
随机推荐
- Popup弹出层滚动不流畅
使用 Vant 框架中的 van-popup 组件(弹框组件);导致列表上下滑动不流畅 Popup 弹出层 滚动不流畅 <van-popup v-model="conFlag" ...
- 共促国产AI生态繁荣,天翼云重磅发布魔乐开发者社区
8月29日,以"聚数乘云,天翼赋能数字经济新生态"为主题的天翼云中国行·贵州站活动顺利举办.会上,天翼云与华为联合打造的魔乐(Modelers)开发者社区正式上线发布.通过建设社区 ...
- Linux docker 的安装及使用
Docker 有两个版本: 社区版(Community Edition,缩写为 CE) 企业版(Enterprise Edition,缩写为 EE) 检查环境 # 系统内核需要 3.10 以上 una ...
- autohue.js:让你的图片和背景融为一体,绝了!
需求 先来看这样一个场景,拿一个网站举例 这里有一个常见的网站 banner 图容器,大小为为 1910*560 ,看起来背景图完美的充满了宽度,但是图片原始大小时,却是: 它的宽度只有 1440 , ...
- Deepseek学习随笔(10)--- 本地AI神器Cherry Studio & Chatbox 保姆级教程(附网盘链接)
本篇介绍的 Cherry Studio 和 Chatbox 两款工具,只需简单几步,即可实现本地化部署AI能力,支持对话.编程.绘图等多场景应用.本文将手把手教你从零开始配置使用! 一.软件下载:两步 ...
- 湖北电信创维E900-S机顶盒-精简系统装当贝桌面
一.打开机顶盒进入本地配置,输入密码:6321,然后打开其他设置-管理应用程序,连续按遥控器方向右键5次左右,这时会出现[USB调试]并打开: 二.从电脑里下载好当贝市场(点击立即下载).当贝桌面(点 ...
- Flink学习(四) Flink Table & SQL 实现wordcount Java版本
Flink Table & SQL WordCountFlink SQL 是 Flink 实时计算为简化计算模型,降低用户使用实时计算门槛而设计的一套符合标准 SQL 语义的开发语言. 一个完 ...
- 大数据之路Week10_day07 (JavaAPI 操作Redis 与Hbase建立索引,通过查询redis中的索引查询Hbase数据)
在这里是简单模拟将索引存到redis中,再通过先查询索引再将Hbase中的数据查询出来. 需要考虑的问题: 1.建立redis的连接,建立Hbase的连接 2.如何创建索引,即创建索引的key和val ...
- Codeforces Round 1007 (Div. 2) 比赛记录
Codeforces Round 1007 (Div. 2) 比赛记录 比赛链接 很喜欢的一场比赛,题目质量很高,不是手速场,做出题超级有成就感,赛时切掉了 A - D1,上大分了. B卡得有点久,其 ...
- Detected non-NVML platform: could not load NVML: libnvidia-ml.so.1: cannot open shared object
前言 在 kubernetes 中配置 https://github.com/NVIDIA/k8s-device-plugin 时, 报错:Detected non-NVML platform: co ...