vue2封装弹窗组件

1. Alert.vue

<template>
  <div v-if="isShow">
    <div class="ui dialog-overlay" />
    <div class="dialog_pop">
      <div v-if="isTitleText" class="pop_tit">
        <h3 v-text="title" />
      </div>
      <div class="pop_cet">
        <p class="pop_text" v-html="message" />
      </div>
      <div class="pop_btn border_top">
        <a
          v-if="isCancelBtn"
          href="javascript:void(0);"
          class="btn_item black"
          @click="handleColse()"
        >{{ cancelText }}</a>
        <a v-if="isSureBtn" href="javascript:void(0);" class="btn_item" @click="handleSure()">{{
          sureText
        }}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true, //默认不显示
      title: '', //外界传值过来，展示
      message: '', // 内容
      cancelText: '取消',
      sureText: '确定',
      isCancelBtn: true, // 是否展示取消按钮
      isSureBtn: true, // 是否展示确认按钮
      isTitleText:true, // 是否展示title
    };
  },

  methods: {},
};
</script>

2. index.js

import Vue from 'vue';
import Alert from './Alert';
const alertContructor = Vue.extend(Alert);

const myAlert = function (options) {
  return new Promise((resolve, reject) => {
    // 实例化
    const instance = new alertContructor({ data: options });
    //dom元素渲染完成
    instance.$mount();
    //手动挂载到body上
    document.body.appendChild(instance.$el);
    instance.handleSure = function () {
      resolve();
      instance.isShow = false;
    };
    instance.handleColse = function () {
      reject();
      instance.isShow = false;
    };
  });
};

export default myAlert;

3. main.js引入

import myAlert from './componts/alert/index'
Vue.prototype.$alert = myAlert;

4. 使用

  created(){
    this.$alert({
      title: '用户须知',
      message:'hellow'
    })
  }