场景:
image.pnghtml
<div v-show="isShowDetail" class="detail_mask" @click="hideDetail($event)">
<div ref="content" class="content">
<p class="close" @click="hideDetail()"><i class="el-icon-close" /></p>
<p class="title"><span>留言详情<em class="not">(老师可在微信教师端针对留言功能进行操作哦~)</em></span></p>
<div style="margin-bottom:10px;" class="form_container">
<el-row>
<el-form ref="cla_form" :model="detailInfo" disabled label-width="100px" label-position="left">
<el-form-item label="留言类型" prop="grade_name">
<el-input v-model="detailInfo.type_str" style="width: 200px" />
</el-form-item>
<el-form-item label="留言状态" prop="number">
<el-input v-model="detailInfo.status_str" type="number" style="width:200px">人</el-input>
</el-form-item>
<el-form-item label="请假时间">
<el-col :span="8">
<el-date-picker v-model="detailInfo.started_at" type="date" placeholder="选择日期" style="width:200px;" />
</el-col>
<el-col class="line" :span="1">至</el-col>
<el-col :span="8">
<el-date-picker v-model="detailInfo.ended_at" type="date" placeholder="选择日期" style="width:200px;" />
</el-col>
</el-form-item>
<el-form-item label="留言内容" prop="desc">
<el-input v-model="detailInfo.body" type="textarea" style="width:500px;" />
</el-form-item>
<el-form-item v-if="detailInfo.reviewers && detailInfo.reviewers.length>0" label="审批人" prop="desc">
<ul class="approver_list">
<li v-for="(item, i) in detailInfo.reviewers" :key="i" class="approver_item">{{ item.auditor_name }}</li>
</ul>
</el-form-item>
</el-form>
</el-row>
</div>
<div class="form_container">
<p class="submitter">提交人:{{ detailInfo.submitter }}</p>
<p class="submit_time">提交时间:{{ detailInfo.submission_time }}</p>
</div>
<div class="text-center">
<el-button type="primary" @click="hideDetail()">返回</el-button>
</div>
</div>
</div>
js vue中的写法
data () {
return {
isShowDetail: false
}
},
methods: {
hideDetail(e) {
if (!e) {
this.isShowDetail = false
} else {
let dom = this.$refs.content
if (!dom.contains(e.target)){ // 点击到了dom以外的区域
this.isShowDetail = false
}
}
},
}
或者
data () {
return {
isShowDetail: false
}
},
methods: {
hideDetail(e) {
if (!e) {
this.isShowDetail = false
} else {
if (e.target.className === 'detail_mask'){ // 点击的是蒙层自己
this.isShowDetail = false
}
}
},
}
网友评论