vue2封装一个全局弹窗组件

好的，下面是一个简单的示例代码：

// 弹窗组件
Vue.component('my-modal', {
  props: {
    title: {
      type: String,
      required: true
    },
    message: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  template: `
    <div class="modal" v-if="show">
      <div class="modal-content">
        <h2>{{ title }}</h2>
        <p>{{ message }}</p>
        <button @click="$emit('close')">关闭</button>
      </div>
    </div>
  `
})

// 使用组件
new Vue({
  el: '#app',
  data: {
    showModal: false
  },
  methods: {
    openModal() {
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
    }
  },
  template: `
    <div>
      <button @click="openModal">打开弹窗</button>
      <my-modal v-bind:title="'标题'" v-bind:message="'这是一个弹窗'" v-bind:show="showModal" v-on:close="closeModal"></my-modal>
    </div>
  `
})

这个弹窗组件使用了 props 来接收标题、内容和是否显示弹窗的状态。在模板中，我们使用了 v-if 来根据 show 的值来控制弹窗的显示和隐藏。关闭按钮的点击事件则通过 $emit 方法触发了一个 close 事件，父组件可以通过监听这个事件来关闭弹窗。在使用组件的时候，我们可以通过 v-bind 来传递 props，通过 v-on 来监听 close 事件。