vue 自定义popup组件并支持scroll组件

本来是使用第三方库 vant的vue 组件库 的popup，后来在popup中使用better-scroll插件的时候，出现并不兼容的情况，也就自己搭建一个popu插件，中间遇到很多问题，都会记录一下，给自己一些总结！

popup组件实现思路

首先是模仿vant的popup组件的功能：vant-popup

1.popup组件开发与样式编写（一个遮罩层，一个显示层）。

2.组件引用（目前是选择的组件导入的方法，没有选择使用插件this.$popup(),主要是用户可以通过组件自定义传参，插件的方式不好实现）。

代码

popup.vue

<template>
  <div >
<!--    遮罩层-->
    <transition name="gh-fade" >
      <div   class="gh-overlay "
             v-if="isShow"
             ref="overlay"
             @click="changShowStat(false)"
             style="z-index: 2019;"
             :style="overlayStyle">
      </div>
    </transition>
    <!--    内容层-->
    <transition :name="'gh-slide-'+position">
       <div  class="gh-popup "
             v-if="isShow"
             ref="popup"
            :class="[
              getPosition,
              {'gh-popup--round':round}
            ]"
            style="z-index:2020"
            :style="styles">
        <slot></slot>
        <i  v-if="closeable"
            @click="changShowStat(false)"
            tabindex="0"
            :class="{
              'gh-icon-cross': closeable && !closeIcon ,
            }"
           class="gh-icon  gh-popup__close-icon gh-popup__close-icon--top-right">
          <img v-if="closeIcon" class="gh-icon__image" :src="closeIcon" alt="">
        </i>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "Popup",
    props:{
      value:Boolean,
      overlayStyle:{
        type:Object
      },
      height:{
        type:String,
        default: 'none'
      },
      width:{
        type:String,
        default: 'none'
      },
      styles:{
        type:Object
      },
      position:{
        type:String
      },
      closeable:{
        type:Boolean,
        default:false
      },
      closeIcon:{
        type:String
      },
      round:{
        type:Boolean,
        default:false
      },
    },
    data(){
      return{
        isShow:this.value
      }
    },
    mounted(){
        this.$nextTick(() => {
            const body = document.querySelector("body");
            if (body.append) {
                body.append(this.$el);