要实现点击其他地方让弹框消失的功能
html部分：
<template>
<div class="eval-container" v-if="evalShow" tabindex="-1" @blur="blurEvent($event)">
<span class="small-btn" @click.stop="dialogContainerShow = !dialogContainerShow">应用评价</span>
<span class="close-icon" @click="evalShow = !evalShow">
<i class="el-icon-circle-close"></i>
</span>
<div class="content" :style="{ display: dialogContainerShow ? 'block' : 'none' }">
<div class="title-container">
<span>应用评价</span>
<i class="el-icon-close" @click="closeDialog" />
</div>
<div class="form">
<div>应用名称：{
{ componentName }}</div>
<div style="display: flex">
<span style="width: 88px">应用评分:</span>
<el-input
oninput="if(value>10)value=10 ;if(value.indexOf('0') == 0) { value=1 };if(value.indexOf('.') > 0){value=value.slice(0,value.indexOf('.') )}"
v-model="grade"
size="mini"
max="10"
min="1"
class="grade"
type="number"
placeholder="范围1-10"
@blur="blurEvent($event)"
></el-input>
</div>
<div>
<p class="text">优化建议：</p>
<el-input
type="textarea"
v-model="suggest"
:autosize="{ minRows: 7, maxRows: 8 }"
placeholder="请输入您的建议..."
@blur="blurEvent($event)"
></el-input>
</div>
<div class="phone">
<span>联系方式：</span
><el-input v-model="phone" size="mini" placeholder="请输入手机号" @blur="blurEvent($event)"></el-input>
</div>
<div class="submit-btn" @click="submitScore">提交</div>
</div>
</div>
</div>
</template>
js部分：
<script>
import { saveEvaluation } from '@/apis/workbench'
import moment from 'moment'
export default {
props: {
applicationId: {
type: String,
default: ''
},
componentName: {
type: String,
default: ''
},
},
data() {
return {
// 评价
grade: '',
suggest: '',
phone: '',
evalShow: true,
dialogContainerShow: false
}
},
mounted() {
// this.$nextTick(() => {
// document.getElementById(this.id).addEventListener('click', () => {
// this.dialogContainerShow = false
// })
// })
},
methods: {
// 提交评价
submitScore() {
if (this.grade == '') {
this.$message.warning('应用评分为空！')
} else {
//评分范围是1-4分必须填写意见和联系方式；5分以上可以不填写意见和联系方式
if (this.grade >= 1 && this.grade <= 4) {
if (this.phone == '') {
this.$message.warning('请填写联系方式')
}
if (this.suggest == '') {
this.$message.warning('请填写优化建议')
}
if (this.suggest !== '' && this.phone !== '') {
//提交评价
this.submitData()
}
} else if (this.grade >= 5) {
this.submitData()
}
}
// 提交成功关闭弹框 清空 grade: 0,suggest: '',
},
submitData() {
let params = {
applicationId: this.applicationId,
applicationName: this.componentName,
fractionalValue: this.grade,
problemFeedback: this.suggest,
phone: this.phone,
monthStart: this.timeDispose('start', 2),
monthEnd: this.timeDispose('end', 2),
weekStart: this.timeDispose('start', 1),
weekend: this.timeDispose('end', 1)
}
saveEvaluation(params).then((res) => {
if (res.data) {
this.$message.success('评价成功！')
this.grade = ''
this.suggest = ''
this.phone = ''
this.dialogContainerShow = !this.dialogContainerShow
} else {
this.grade = ''
this.suggest = ''
this.phone = ''
this.dialogContainerShow = !this.dialogContainerShow
this.$message.warning(res.message)
}
})
},
// 关闭应用评价弹框
closeDialog() {
this.dialogContainerShow = !this.dialogContainerShow
this.grade = 0
this.suggest = ''
this.phone = ''
},
blurEvent(e){
// console.log("eeeeee",e);
// console.log("relatedTarget",e.relatedTarget);
if(e.relatedTarget == null){
this.dialogContainerShow = false
}
},
// 请求时间处理
timeDispose(kind, value) {
let time = ''
value == 0
? kind.includes('start')
? (time = moment(new Date()).startOf('days').format('YYYY-MM-DD HH:mm:ss'))
: (time = moment(new Date()).endOf('days').format('YYYY-MM-DD HH:mm:ss'))
: ''
value == 1
? kind.includes('start')
? (time = moment(new Date()).startOf('week').add({ d: 1 }).format('YYYY-MM-DD HH:mm:ss'))
: (time = moment(new Date()).endOf('week').add({ d: 1 }).format('YYYY-MM-DD HH:mm:ss'))
: ''
value == 2
? kind.includes('start')
? (time = moment(new Date()).startOf('months').format('YYYY-MM-DD HH:mm:ss'))
: (time = moment(new Date()).endOf('months').format('YYYY-MM-DD HH:mm:ss'))
: ''
return time
}
}
}
</script>
css部分：
/* 应用评价样式 */
.eval-container {
position: absolute;
right: 0;
bottom: 100px;
.small-btn {
position: absolute;
right: 0;
bottom: 100px;
display: inline-block;
padding: 12px 10px;
width: 34px;
height: 96px !important;
background: #526ade;
color: rgba(255, 255, 255, 0.9);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 14px;
line-height: 18px;
cursor: pointer;
z-index: 2000;
}
.close-icon {
position: absolute;
right: 8px;
bottom: 80px;
z-index: 2000;
cursor: pointer;
}
.content {
background: #fff;
box-shadow: 0 0 15px 2px #ccc;
position: absolute;
right: 50px;
bottom: 0;
width: 300px;
height: 420px;
border-radius: 5px;
padding: 16px;
cursor: auto;
color: #666666;
z-index: 20000;
.title-container {
font-size: 16px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.el-icon-close {
line-height: 20px;
cursor: pointer;
}
}
.form {
> div {
margin-bottom: 14px;
.text {
margin-bottom: 5px;
margin-top: 14px;
}
.grade {
width: 88px;
line-height: 28px;
.el-input__inner {
padding-right: 0 !important;
padding-left: 8px;
}
}
}
.phone {
.el-input {
width: 188px;
}
}
.submit-btn {
width: 100%;
height: 30px;
background-color: #526ade;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
}
}
.content::after {
content: '';
display: block;
position: absolute;
border-width: 12px;
border-top-width: 14px;
border-bottom-width: 14px;
border-style: solid;
border-color: transparent;
border-left-color: #fff;
bottom: 40px;
right: -22px;
}
}这个弹框组件使用代码（已省略一部分代码）：
<!-- 应用评价 -->
<AppEvaluation :applicationId="applicationId" :componentName="iframeTitle"></AppEvaluation>这个代码的难点在@blur事件中；由于我是在iframe组件中添加弹框组件，所以当blur的时候获取不到event.relatedTarget元素；即打印（iframe元素）它是null
所以判断条件是e.relatedTarget == null就让弹框消失；
如果是正常页面blur事件的话，判断条件可以这样写：
blurEvent(e){
// console.log("eeeeee",e);
// console.log("relatedTarget",e.relatedTarget);
if(e.relatedTarget == ‘外面点击这个元素让弹框消失的元素’){
this.dialogContainerShow = false
}
},给大家说一个iframe添加点击事件的坑，因为我之前做的是给iframe添加点击事件让弹框消失的效果，，于是百度出来的方法是给iframe标签外层添加一层div，然后给这个div添加点击事件让弹框消失，就是这段代码：
最后确实达到我要的效果了，不过再点击iframe页面的功能全部无效了。。。
所以还是要用@blur事件去写！！！