vue2.0项目 自定义全局弹框

你可以通过以下步骤来自定义全局弹框：

1. 在项目中新建一个全局弹框组件，例如 `GlobalDialog.vue`。

2. 在 `main.js` 中导入该组件并注册为全局组件：

import GlobalDialog from '@/components/GlobalDialog.vue'
Vue.component('global-dialog', GlobalDialog)

3. 在需要使用弹框的组件中，使用 `$emit` 方法触发一个事件，例如 `open-dialog`：

// 在组件中
this.$emit('open-dialog', {
  title: '弹框标题',
  content: '弹框内容',
  confirmText: '确认按钮文字',
  cancelText: '取消按钮文字',
  onConfirm: () => {
    // 确认按钮回调
  },
  onCancel: () => {
    // 取消按钮回调
  }
})

4. 在 `App.vue` 中监听该事件并显示全局弹框：

<template>
  <div id="app">
    <global-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :content="dialogContent"
      :confirm-text="confirmText"
      :cancel-text="cancelText"
      @confirm="dialogOnConfirm"
      @cancel="dialogOnCancel"
    ></global-dialog>
    <router-view @open-dialog="showDialog"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      dialogContent: '',
      confirmText: '',
      cancelText: '',
      dialogOnConfirm: () => {},
      dialogOnCancel: () => {}
    }
  },
  methods: {
    showDialog(data) {
      this.dialogTitle = data.title
      this.dialogContent = data.content
      this.confirmText = data.confirmText || '确定'
      this.cancelText = data.cancelText || '取消'
      this.dialogOnConfirm = data.onConfirm || (() => {})
      this.dialogOnCancel = data.onCancel || (() => {})
      this.dialogVisible = true
    }
  }
}
</script>

这样就可以在任何需要使用全局弹框的组件中，通过 `$emit` 方法触发 `open-dialog` 事件，并传递弹框的相关参数来显示全局弹框了。