使用vue实现各类弹出框组件

使用vue实现各类弹出框组件需要遵循以下步骤：

步骤一：创建全局的Vue组件

首先，我们需要创建一个全局的Vue组件，该组件用于渲染弹出框，并设置如下属性：

• v-show: 用于控制组件的显隐状态
• title: 弹出框的标题
• width: 弹出框的宽度
• height: 弹出框的高度
• ok: 点击“确认”按钮时的回调函数
• cancel: 点击“取消”按钮时的回调函数

示例代码如下：

<template>
  <div class="popup" v-show="visible">
    <div class="popup-header">{{ title }}</div>
    <div class="popup-body">
      <slot></slot>
    </div>
    <div class="popup-footer">
      <button @click="ok()">确认</button>
      <button @click="cancel()">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    width: String,
    height: String,
    ok: Function,
    cancel: Function,
  },
};
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-header {
  background-color: #fff;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
}

.popup-body {
  background-color: #fff;
  padding: 20px;
  width: 80%;
  max-height: 80%;
  overflow: auto;
}

.popup-footer {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

步骤二：创建各类弹出框组件

接下来，我们可以根据实际需求，创建各类不同类型的弹出框组件，例如提示框、确认框、输入框等。这些组件需要继承并扩展全局组件，实现具体的功能。

示例一：实现提示框组件

提示框组件只需要在全局组件的基础上，传入相应的数据即可实现。示例代码如下：

<template>
  <popup
    :visible="visible"
    :title="title"
    :width="width"
    :height="height"
    :ok="onOk"
    :cancel="onCancel"
  >
    <p>{{ message }}</p>
  </popup>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  extends: Popup,
  props: {
    message: String,
  },
  data() {
    return {
      title: '提示框',
      width: '400px',
      height: '200px',
      visible: true,
    };
  },
  methods: {
    onOk() {
      this.visible = false;
    },
    onCancel() {
      this.visible = false;
    },
  },
};
</script>

示例二：实现确认框组件

确认框组件需要额外传入一个确认信息的文本，以及确认框的文案。示例代码如下：

<template>
  <popup
    :visible="visible"
    :title="title"
    :width="width"
    :height="height"
    :ok="onOk"
    :cancel="onCancel"
  >
    <p>{{ message }}</p>
  </popup>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  extends: Popup,
  props: {
    message: String,
    confirmText: {
      type: String,
      default: '确定',
    },
  },
  data() {
    return {
      title: '确认框',
      width: '400px',
      height: '200px',
      visible: true,
    };
  },
  methods: {
    onOk() {
      this.visible = false;
      this.$emit('confirm');
    },
    onCancel() {
      this.visible = false;
      this.$emit('cancel');
    },
  },
};
</script>

步骤三：在组件中使用弹出框

最后，我们可以在其他组件中引入这些弹出框组件，并使用v-show指令控制它们的显隐状态。例如，在一个按钮上绑定click事件，点击后弹出提示框：

<template>
  <div>
    <button @click="showMessage">显示提示框</button>
    <message-popup ref="message" :message="message"></message-popup>
  </div>
</template>

<script>
import MessagePopup from '@/components/MessagePopup.vue';

export default {
  components: {
    'message-popup': MessagePopup,
  },
  data() {
    return {
      message: 'Hello, world!',
    };
  },
  methods: {
    showMessage() {
      this.$refs.message.visible = true;
    },
  },
};
</script>

以上为使用Vue实现各类弹出框组件的完整攻略，其中包含了两个示例，分别实现了提示框和确认框组件。