Vue中ElementUI 日期选择没有click点击

Vue中ElementUI 日期选择没有click点击

功能

想实现一个有遮罩层，日期选择器在屏幕中间，使用Element ui中的日期选择器实现，点击选择器日历选项和遮罩层显示，当选好日期是点击，选择器日历关闭和遮罩层隐藏，点击遮罩层时日期选择器关闭，这遮罩层隐藏，

过程

发现Element UI的el-date-picker组件没有click事件的忌口，不能使用点击实现。

所以然被的元素触发点击事件实现上面的效果，

思路添加一个div触发点击时间，让div与日期选择器同样大小，相对父元素定位覆盖在日期框上，颜色透明，设置大的z-index，然后添加点击事假，父元素添加遮罩css样式，el-date-picker设置ref，点击div是触发el-date-picker的focus。显示选择器日历，遮罩层样式显示，可是选好日期点击选择器日历的嗜好发现日历关闭，遮罩效果还在，因为el-date-picker没有click点击时间，真烦，做后实现触发el-date-picker组件的 blur 事件， 当 input 失去焦点时触发是隐藏遮罩样式。

代码实现

<template>
  <div class="block" :class="{warp:Mask}">
    <el-date-picker
        v-model="value"
        type="date"
        format="M月dd日"
        ref="date"
        @blur="hide"
        placeholder="选择日期">
    </el-date-picker>
    <div class="Mask" @click.stop.prevent="displayHide"></div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import {Component, Prop, Ref} from "vue-property-decorator";

@Component
export default class Dates extends Vue {
  @Prop(String) times!:string
  value = new Date().toISOString()
  Mask = false
  Hide = false
  @Ref('date')  input !:HTMLInputElement

  created() {
    this.$emit('update:time', this.value)
  }
  displayHide(){
    if (this.Hide) {
      this.Hide = false
      return
    }
    this.input.focus()
    this.Mask = true
  }

  hide() {
    this.Mask = false
    this.Hide = true
    this.$emit('update:time', this.value)
  }
}
</script>

<style lang="scss">

.block {
  position: relative;
  width: 100%;

  > div.el-date-editor {
    width: 100%;

    > input.el-input__inner {
      text-align: center;
      padding: 0;
      border: none;
      background: rgba(0, 0, 0, 0);
      color: black;

      &::-webkit-input-placeholder {
        color: black;
      }
    }

    > span {
      display: none;
    }
  }

  > .Mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    z-index: 10;
  }

  &.warp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
  }
}

body {

  .el-picker-panel {

    margin: 15px 0;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);

    > .popper__arrow {
      display: none;
    }

    > .el-picker-panel__body-wrapper {
      > .el-picker-panel__body {
        > .el-picker-panel__content {
        }
      }
    }
  }
}
</style>