To realize the function of clicking other places to make the pop-up box disappear
html part:
<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 part:
<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 part:
/* 应用评价样式 */
.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;
}
}
This bullet box component uses code (some code has been omitted):
<!-- 应用评价 -->
<AppEvaluation :applicationId="applicationId" :componentName="iframeTitle"></AppEvaluation>
The difficulty of this code is in the @blur event; since I am adding the bullet box component in the iframe component, the event.relatedTarget element cannot be obtained when blurring; that is, print (iframe element) it is null
So the judgment condition is that e.relatedTarget == null and the bullet box disappears;
If it is a normal page blur event, the judgment condition can be written as follows:
blurEvent(e){
// console.log("eeeeee",e);
// console.log("relatedTarget",e.relatedTarget);
if(e.relatedTarget == ‘外面点击这个元素让弹框消失的元素’){
this.dialogContainerShow = false
}
},
Let me tell you about a pit of adding a click event to an iframe, because what I did before was to add a click event to the iframe to make the pop-up box disappear, so Baidu’s method is to add a layer of div to the outer layer of the iframe tag, and then give this div Add a click event to make the popup disappear, which is this code:
In the end, I did achieve the effect I wanted, but the functions of clicking on the iframe page are all invalid. . .
So still use the @blur event to write! ! !