用vue写一个dialog对话框组件

好的，我可以为您提供一个简单的 Vue Dialog 组件示例代码：

<template>
  <div v-show="visible" class="dialog-wrapper">
    <div class="dialog">
      <div class="dialog-header">
        <h3>{{ title }}</h3>
        <button class="close-btn" @click="closeDialog">X</button>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <button class="btn-primary" @click="confirm">确认</button>
        <button class="btn-secondary" @click="closeDialog">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '提示',
    },
  },
  methods: {
    confirm() {
      // 触发确认事件
      this.$emit('confirm')
    },
    closeDialog() {
      // 触发关闭事件
      this.$emit('close')
    },
  },
}
</script>

<style>
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog {
  width: 400px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.dialog-header {
  padding: 10px;
  background: #f5f5f5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-body {
  padding: 20px;
}

.dialog-footer {
  padding: 10px;
  background: #f5f5f5;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  justify-content: flex-end;
}

.btn-primary {
  margin-right: 10px;
  padding: 5px 10px;
  background: #409eff;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #bbb;
  color: #333;
  border-radius: 5px;
  cursor: pointer;
}
</style>

在上面的代码中，我们定义了一个名为 `Dialog` 的 Vue 组件，它有一个 `visible` 属性来控制对话框的显示与隐藏，还有一个 `title` 属性来设置对话框的标题。

对话框内部包含三个部分：头部、内容和底部按钮。头部包含一个标题和一个关闭按钮，内容部分使用了 Vue 的插槽来允许我们自定义对话框的内容，底部包含了两个按钮：确认和取消。

在组件内部，我们定义了 `confirm` 和 `closeDialog` 两个方法来分别触发确认和关闭事件（使用了 `$emit` 方法）。在外部使用该组件时，我们可以监听这两个事件来获取用户的操作结果。

最后，我们还为组件添加了一些简单的样式。这只是一个简单的示例代码，你可以根据自己的需求进行修改和定制。