vue2.0自定义弹框组件

1. 定义弹框内容 模板数据

<template>
    <van-overlay :show="showVisit" z-index="999">


        <div class="wrapper">
          <div class="bottomdialog">
            <div class="box4">
              <div class="msg">*请您务必填写姓名。</div>
              <div class="realinput">
                <input type="text" class="myname" v-model="myname" />
              </div>
              <div class="visitbox">
                <button class="white" :disabled="!myname?true:false" :class="{on:myname}"
                  @click="tijiao">提交</button>
              </div>
            </div>
          </div>
        </div>
      </van-overlay>
</template>

import Vue from 'vue';
import { Overlay } from 'vant';

Vue.use(Overlay);
export default {
  data () {
    return {
        showVisit:false,
        myname:'aaaaaaa',
        disease:''
    }
   
  },
  computed:{
     status(){
       return this.$store.state.isShow
     }
  },
  mounted(){
   console.log(this.$store.state.isShow)
  },
  methods:{
    
    show(){
      this.showVisit=true;
    },
    hide(){
  this.showVisit=false;
    },
    tijiao(){
      this.perfectName();
    },
    perfectName(){
      this.$api.perfectName({
           appid,
           realname:this.myname
        })
        .then((rep) => {
          var result = rep.data;
          if (result.code == 200) {
            this.$toast({
              duration: 1000,
              message: "提交成功",
            });
            this.$store.commit("showModal", false);
            window.location.reload()
          }else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
            return false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
}

<style  scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .bottomdialog {
    padding-top: 20px;
  }



  .bottomdialog .close {
    right: 3px;
    top: 5px;
    width: 24px;
    height: 24px;
    position: absolute;
  }

  .visitbox {
    margin: 15px 16px 0 !important;
  }

  .bottomdialog .white {
    width: 100% !important;
    margin: 0 !important;
    color: #ffffff !important;

    background: #d3d3d3 !important;
    border-color: #d3d3d3 !important;
  }

  .bottomdialog .white.on {

    background: #3cc7c0 !important;
  }

  .realinput {
    margin: 0 16px;
  }


  .myname {
    display: inline-block;

    width: 100%;
    box-sizing: border-box;
    margin-right: 16px;
    color: #3cc7c0;
    display: flex;
    font-size: 15px;
    align-items: center;
    text-indent: 10px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #999999;
  }

</style>

2.定义创建dom

import Vue from "vue"
import Modal from "../components/name/name.vue";
import {store} from '../store.js';
let alertConstructor=Vue.extend(Modal);
let MaskModal=(option)=>{
    let maskDom=new alertConstructor({
        el:document.createElement("div"),
        store:store,
        propsData:option
    });
    maskDom.show=(option)=>{
        maskDom.showVisit=true;
        maskDom.disease=option
    },
    maskDom.hide=()=>{
        maskDom.showVisit=false;
    }
    document.body.appendChild(maskDom.$el);
   
    return maskDom;
}
let maskModalObj=MaskModal();


export default maskModalObj;

3 引用

import mask from '../utils/modal'
 mask.show();