自定義Modal組件

彈窗效果

1.需求來源

因最近做移動端頁面，頁面是從pc端移動到手機端的，一些彈窗的功能也伴隨移動，遂參考cub-ui撰寫了這個彈窗組件

2.代碼撰寫

2.1css撰寫

.gf-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  pointer-events: none;

  &.gf-show-mask {
    pointer-events: auto;
    .gf-modal-mask {
      display: block;
    }
  }
  .gf-modal-mask,
  .gf-modal-container {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .gf-modal-mask {
    display: none;
    overflow: hidden;
    background-color: #25262d;
    opacity: 0.4;
    pointer-events: auto;
  }

  .gf-modal-container {
    transform: translate(100%, 100%);
  }

  .gf-modal-center {
    .gf-modal-content {
      transform: translate(-50%, -50%);
      top: -50%;
      left: -50%;
      width: auto;
      max-width: 100%;
      position: absolute;

      .gf-modal-main {
        border-radius: 5px;
        width: 95vw;
        padding: 0;
        text-align: center;
        overflow: hidden;
        background-color: #fff;

        .gf-modal-top {
          text-align: left;
          padding-left: 0.5rem;
          border-bottom: 1px solid #E5E5E5;
          height: 40px;
          line-height: 40px;

          .gf-modal-title {
            color: #333;
            font-size: 0.426667rem;
            line-height: 1;

            p {
              margin: 0.8rem 0.426667rem 0;
              overflow: hidden;
              white-space: nowrap;
            }
          }

          .gf-modal-close {
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            position: absolute;
            top: 0;
            right: 0;
            width: 0.853333rem;
            height: 0.853333rem;
            color: #999;
            font-size: 0.48rem;
          }
        }

        .gf-modal-alert {
          position: relative;
          overflow: hidden;

          .gf-modal-title {
            color: #333;
            font-size: 0.426667rem;
            line-height: 1;

            p {
              margin: 0.8rem 0.426667rem 0;
              overflow: hidden;
              white-space: nowrap;
            }
          }

          .gf-modal-detail-content {
            max-height: 60vh;
            overflow-y: scroll;
            margin: 0.426667rem 0;
            text-align: left;
            color: #666;
            font-size: 0.373333rem;
            line-height: 0.586667rem;

            .gf-modal-details {
              padding: 0 0.426667rem;

              .cube-input {
                margin-bottom: 8px;
              }

              .cube-textarea {
                padding-left: 0.133333rem;
              }

              .cube-input-field {
                padding: 5px;

                &::-webkit-input-placeholder {
                  color: #ccc;
                  text-overflow: ellipsis;
                  font-weight: 100;
                  font-family: monospace;
                }
              }

              label {
                color: #333;
              }
            }
          }

          .gf-modal-btns {
            border-top: 1px solid #E5E5E5;
            height: 50px;
            line-height: 50px;
            overflow: hidden;
            width: 100%;
            display: flex;
            flex-direction: row-reverse;
            font-size: 0;

            button {
              width: 60px;
              height: 30px;
              line-height: 1;
              border: 1px solid #CECECE;
              margin: 10px 5px 0;
              border-radius: 5px;
              color: #fff;

              &:focus {
                outline: none;
              }
            }
          }
        }

      }
    }
  }

}

2.2vue撰寫

<template>
  <div class="gf-modal gf-show-mask" style="z-index:100">
    <div class="gf-modal-mask" id="gf-modal-mask"></div>
    <div class="gf-modal-container gf-modal-center">
      <div class="gf-modal-content">
        <div class="gf-modal-main">
          <div class="gf-modal-top">
            <span class="gf-modal-title">{{title}}</span>
            <span class="gf-modal-close">
              <i class="cubeic-close" @click="cancel"></i>
            </span>
          </div>
          <div class="gf-modal-alert">
            <div class="gf-modal-detail-content">
              <div class="gf-modal-details">
                <slot name="content"></slot>
              </div>
            </div>
            <div class="gf-modal-btns" v-if="showBtn">
                <button class="blue" @click="confirm">確認</button>
                <button class="white font-color" @click="cancel">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    title: {
      type: String,
      default: "標題"
    },
    showBtn: {
      type: Boolean,
      default: true
    },
  }, 
  data() {
    return {};
  },
  created() {},
  mounted() {
    //兼容ios方法1
    //設定遮罩層后無法滑動和觸摸  pc無效
    var shield = document.getElementById("gf-modal-mask"); //這里寫遮罩層的名字
    shield.addEventListener(
      "touchstart",
      function (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      false
    );
     document.body.style.overflow="hidden";
  },
  methods: {
    cancel() {
     document.body.style.overflow="auto";
     this.$emit("cancel");
    },
    confirm() {},
  },
};
</script>

<style>
</style>

3.組件使用

<Modal  @cancel="cancel" :title="modalTile" v-if="showModal">
          <template slot="content">
            <component :is="tabView" :nameObj="nameObj" v-if="showModal"></component>
          </template>
      </Modal>
  data(){
	return{
	  modalTile:'',
      nameObj:{},
      tabView:'',
      showModal:false,
     }
}

3.1特別說明

	此處用到了插槽slot，參考程序中，slot中內容會渲染到組組件中去，

4.總結

	通過上面簡單的幾步，組件就已經撰寫ok了，只是使用程序中還是遇到過坑點：
	transform：translate 移動會影響組件位置（這里面想著解決方法就是效仿其他ui組件，放在body的里面那層，組件移動比較麻煩，）