elementprompt如何监听弹框出现

Posted 2023-03-23

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不带输入框。 参考技术A 这篇文章主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
组件—弹框

消息提示

<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
export default
methods:
open()
this.$alert('这是一段内容', '标题名称',
confirmButtonText: '确定',
callback: action =>
this.$message(
type: 'info',
message: `action: $ action `
);

);



</script>
确认消息

<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
export default
methods:
open()
this.$alert('这是一段内容', '标题名称',
confirmButtonText: '确定',
callback: action =>
this.$message(
type: 'info',
message: `action: $ action `
);

);



</script>
提交内容

<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
export default
methods:
open()
this.$prompt('请输入邮箱', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`|~-]+(?:\.[\w!#$%&'*+/=?^_`|~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
).then(( value ) =>
this.$message(
type: 'success',
message: '你的邮箱是: ' + value
);
).catch(() =>
this.$message(
type: 'info',
message: '取消输入'
);
);



</script>
自定义

<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
export default
methods:
open()
const h = this.$createElement;
this.$msgbox(
title: '消息',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', style: 'color: teal' , 'VNode')
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) =>
if (action === 'confirm')
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
setTimeout(() =>
done();
setTimeout(() =>
instance.confirmButtonLoading = false;
, 300);
, 3000);
else
done();


).then(action =>
this.$message(
type: 'info',
message: 'action: ' + action
);
);



</script>
使用 html 片段

<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
export default
methods:
open()
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段',
dangerouslyUseHTMLString: true
);



</script> 参考技术B 可输入弹框 $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 ...
).c 参考技术C elementprompt监听弹框出现的方法：用代码写一个监听程序然后在电脑上运行。

vue实现点击一个按钮出现弹框，点击弹框外关闭弹框

vue实现点击一个按钮出现弹框，点击弹框外关闭弹框

效果图展示：

 

View层

<template>
  <div>
    <div class="mask" v-if="showModal" @click="showModal=false"></div>
    <div class="pop" v-if="showModal">
        <button @click="showModal=false" class="btn">点击出现弹框</button>
    </div>
    <button @click="showModal=true" class="btn">点击出现弹框</button>
  </div>
</template>

 

数据层：

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

 

样式层：

<style scoped>
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;
 
  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px);
  z-index: 2
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>

 

关键点：

1.mask层的层级（z-index）要比弹出的pop的层级低。

2.wow,写完啦，就是这么简单....

完整代码：

<template>
  <div>
    <div class="mask" v-if="showModal" @click="showModal=false"></div>
    <div class="pop" v-if="showModal">
        <button @click="showModal=false" class="btn">点击出现弹框</button>
    </div>
    <button @click="showModal=true" class="btn">点击出现弹框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style scoped>
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;
 
  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px);
  z-index: 2
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>

 

扩展：按钮在父组件，弹框是一个子组件，会涉及到父子组件之间的传值。

-------

转载于:https://www.cnblogs.com/DZzzz/p/11204805.html