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内存泄漏的七个神坑,你至少踩过三个!
引子:那个让运维集体加班的夜晚 "凡哥!线上服务响应时间飙到10秒了!"凌晨1点,实习生小李的语音带着哭腔. 监控大屏上,JVM堆内存曲线像坐了火箭--刚扩容的16G内存,30分钟 ...
- Spark - [03] 资源调度模式
题记部分 一.Local模式 1.1.概述 Local模式就是运行在一台计算机上的模式,通常就是用于在本机上练手和测试的. 可以通过以下几种方式设置Master (1)local:所欲计算都运行在一个 ...
- 纯离线部署本地知识库LLM大模型
纯离线部署本地知识库LLM大模型 一.下载离线大模型 下载的网址:https://hf-mirror.com/ deepseek qwen 相关的模型,只建议使用1.5B的,GGUF后缀的模型 推荐下 ...
- spark-shell启动报错
Spark On Hive 配置步骤在Spark客户端安装包下的conf目录中创建文件hive-site.xml,配置hive的metastore路径 <configuration> &l ...
- python 二级 语言基本元素笔记-字符串
l='12345' 1.递增顺序: 正向递增从0开始 负向从[-1]开始,l[1]=2,l[-1]=5 2.切片操作:左开右闭,l[2:5]=3,4 3.导入库,引入 库名.函数名 input函数 输 ...
- 自行为一加6编译Postmarket os内核
序 在为自己的一加6刷上PostmarketOS后突然某一天想使用它的照相机功能.原因是想到使用pmos拍照后笔者可以直接使用scp指令来传输手机相片到自己运行着GNU/Linux的电脑上,就感到相对 ...
- RSA密钥生成-已知p、q、e求私钥d的python脚本
题目: 在一次RSA密钥对生成中,假设p=473398607161,q=4511491,e=17 求解出d作为flag提交 求解过程: 首先计算n和ϕ(n) n=p*q ϕ(n)=(p-1)(q-1 ...
- Pydantic根校验器:构建跨字段验证系统
title: Pydantic根校验器:构建跨字段验证系统 date: 2025/3/24 updated: 2025/3/24 author: cmdragon excerpt: Pydantic根 ...
- MySQL-redo log 和 binlog
redo log部分 为什么需要redo log? 简单的说,如果每次更新数据库的操作,都去更新磁盘的话,开销是很大的.通过引入redo log日志,其中记录了每次更新的操作明细,在系统不繁忙的时候, ...
- 【Markdown】公式指导手册
点击跳转至 Cmd Markdown 简明语法手册 ,立刻开始 Cmd Markdown 编辑阅读器的记录和写作之旅! 本文为 MathJax 在 Cmd Markdown 环境下的语法指引. Cmd ...