VUE实现命令式弹窗组件

VUE实现命令式弹窗组件

​ 在开发vue项目的过程中，很多场景需要弹出一些公用的确认弹框，这种时候通过传参调用弹窗api不失为一个合适的方案：

实现步骤

1. 写出组件结构
2. 转为命令式可调用api
3. 将调用方法挂在到全局

组件结构

components/confirm.vue

<template>
  <div class="confirm" v-show="showConfirm">
    <div class="confirm-wrapper">
      <div class="confirm-content">
        <p class="title">{
   {
   title}}</p>
        <div class="operate-box" @click.stop>
          <div class="operate-btn operation-cancel" @click="cancel">{
   {
   cancelBtnText}}</div>
          <div class="operate-btn" @click="confirm">{
   {
   ConfirmBtnText}}</div>
    		</div>
    	</div>
    </div>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      showConfirm: