美文网首页
点击遮罩层或关闭按钮隐藏遮罩层

点击遮罩层或关闭按钮隐藏遮罩层

作者: 八妹sss | 来源:发表于2019-05-29 15:36 被阅读0次
场景:
image.png

html

<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
        }
      }
    },
}

相关文章

网友评论

      本文标题:点击遮罩层或关闭按钮隐藏遮罩层

      本文链接:https://www.haomeiwen.com/subject/nkrytctx.html