vue弹窗组件

基于VUE的input双向绑定机制

// 弹窗
<template>
  <div>
    <div v-show="visible" :value="value" class="mod">
      <div class="mod_body">
        <div v-if="useClose" class="close" @click="cancel">X</div>
        <div class="mod_title" v-if="title">{{title}}</div>
        <div class="slot">
          <slot/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    // 是否出现关闭
    useClose: {
      type: Boolean,
      default: true
    },
    //标题
    title: {
      type: String
    }
  },
  data() {
    return {
      visible: false,
      scrollTop: 0
    };
  },
  watch: {
    value(val) {
      this.visible = val;
      const body = window.document.body;
      if (val) {
        this.scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;
        body.style.position = "fixed";
        body.style.width = "100%";
        body.style.top = -this.scrollTop + "px";
      } else {
        body.style.position = "relative";
        body.style.top = 0;
        document.body.scrollTop = this.scrollTop;
      }
    },
    visible(val) {
      this.$emit("input", val);
    }
  },
  mounted() {
    if (this.value) {
      this.visible = true;
    }
  },
  methods: {
    cancel() {
      this.visible = false;
    }
  }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss" >
// @import '~@/assets/css/style.less';
.mod {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  //   height: 100vh;
  background-color: rgba(0, 0, 0, 0.73);
  z-index: 999;
  .mod_body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-60%);
    margin-left: -35%;
    border-radius: 6px;
    width: 70%;
    background-color: #fff;
    padding-bottom: 20px;
    .close {
      position: absolute;
      top: 0;
      right: 0;
      width: 38px;
      height: 38px;
      //   background-image: url('~@/assets/image/red-pack/close.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .slot {
      padding: 0 20px;
      height: 72%;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  .mod_title {
    font-size: 16px;
    color: #4a4a4a;
    text-align: center;
    line-height: 23px;
    padding: 38px 25px 0 25px;
  }
}
</style>

 

使用

<template>    
  <alert-mod v-model="showModal" :title="'xxx_title'">xxx_body</alert-mod>
</template>

import alertMod from "@/alertMod.vue";
export default {
  components: { alertMod },
  data() {
    return {
      showModal: true
    };
  },
}