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 ...
随机推荐
- 个人数据保全计划:部署joplin server笔记同步服务
前言 在这个数据爆炸的时代,个人数据的价值愈发凸显,成为我们生活与工作中无可替代的重要资产.上一篇文章里,我介绍了从印象笔记迁移至 Joplin 的过程,这是我寻求数据自主掌控的关键一步.在探索同步方 ...
- Python 数
Python 数 在Python中,数字是编程中不可或缺的一部分.Python支持多种类型的数字,包括整数.浮点数等.下面我们将详细介绍这些数字类型以及它们之间的运算和格式化. 整数 整数是Pytho ...
- 手把手教你喂养 DeepSeek 本地模型
上篇文章<手把手教你部署 DeepSeek 本地模型>首发是在公众号,但截止目前只有500多人阅读量,而在自己博客园BLOG同步更新的文章热度很高,目前已达到50000+的阅读量,流量是公 ...
- RocketMQ实战—10.营销系统代码优化
大纲 1.营销系统引入MQ实现异步化来进行性能优化 2.基于MQ释放优惠券提升系统扩展性 3.基于Redis实现重复促销活动去重 4.基于促销活动创建事件实现异步化 5.推送任务分片和分片消息batc ...
- 多项式算法再探:FMT 和 FWT
我们知道,FFT 和 NTT 可以用来解决下面这种问题: \[c_k=\sum_{i+j=k}a_ib_j \] 不过,这并不是卷积的全部形态,比如下面这种: \[c_k=\sum_{i*j=k}a_ ...
- 5. 想在代码中验证sql的正确性?
1. 简介 我们在平时的开发中可能会遇到需要验证一下sql是否正确,也就是需要check一下sql. 判断sql是否正确一般包含一下几点: 1. sql中使用的列是否存在 2. sql语法是否正确 3 ...
- 解决 Docker 容器镜像拉取难题:全面指南
一.引言 在使用 Docker 容器的过程中,经常会遇到镜像拉取慢甚至无法下载的问题,这给开发和部署工作带来了不小的困扰.本文将深入探讨这一问题的原因,并提供多种有效的解决方案. 二.问题原因分析 网 ...
- 基于Openframeworks调取摄像头方式的定时抓拍保存图像方法小结
这次是采用Openframeworks来调取摄像头画面并抓图保存. 开始 借向导自动生成代码,因为要调取摄像头设备,因此增添ofVideoGrabber对象声明,又因为保存需求,所以还需添加ofPix ...
- google浏览器删除token
测试登录时长,页面是否返回到首页 删除token
- 0基础的人关于C++多态产生的一系列疑问
之前在面试的时候被问过懂不懂C++,懂不懂"多态".我之前搞科研一直在用Python,不会C++.完全没听过"多态"这个词,只听说过"多模态" ...