@jianghujs/jianghu/app/view/component/jianghuJs/jhMaskV4.html

Progressive Enterprise Framework

<!-- jhMask.html >>>>>>>>>>>>> -->
<script type="text/html" id="jh-mask">
  <div v-if="isMaskShown" class="jh-mask"></div>
</script>

<script>
  Vue.component('jh-mask', {
    template: "#jh-mask",
    vueComponent: 'jh-mask',
    vuetify: new Vuetify(),
    data() {
      return {
        isMaskShown: false,
        timer: null,
        timerRemind: 0,
        timeout: 0
      };
    },
    created() {
      window.jhMask = {
        show: this.show,
        hide: this.hide
      };
      this.hideTimer()
    },
    methods: {
      hideTimer() {
        this.timer = setInterval(() => {
          if (this.timeout == 0) {
            return
          }
          this.timerRemind -= 1000;
          if (this.timerRemind < 1000) {
            this.hide()
          }
        }, 1000);
      },
      show(paramObj) {
        if (typeof (paramObj) == 'number') {
          this.timeout = paramObj;
        }
        if (typeof (paramObj) == 'object') {
          const {timeout} = paramObj
          this.timeout = timeout;
          this.timerRemind = timeout;
        }
        this.isMaskShown = true;
      },
      hide() {
        this.isMaskShown = false;
      }
    },
  });

</script>
<style>

.jh-mask {
  position: fixed;
  display: block;
  background-color: #e3e3e3;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  animation: all .3s ease;
}
</style>
<!-- <<<<<<<<<<<<< jhMask.html -->