自定义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的里面那层，组件移动比较麻烦。）