Dialog 自定义右上角功能 vue

要自定义 Dialog 组件的右上角功能，您需要使用 Vue.js 的插槽（slot）功能和 Dialog 组件的一些属性。以下是一个简单的示例：

<template>
  <div class="dialog">
    <div class="header">
      <span class="title">{{ title }}</span>
      <div class="actions">
        <slot name="header"></slot>
        <button class="close-btn" @click="closeDialog">X</button>
      </div>
    </div>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    closeDialog() {
      // 触发关闭对话框事件
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  z-index: 999;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
}

.actions {
  display: flex;
  align-items: center;
}

.close-btn {
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 24px;
  margin-left: 20px;
  cursor: pointer;
}
</style>

在这个示例中，我们定义了一个名为`header`的插槽，用于放置自定义功能按钮。我们还定义了一个名为`close`的事件，用于在点击关闭按钮时触发。

要使用这个 Dialog 组件，您可以这样写：

<template>
  <div>
    <button @click="showDialog">打开对话框</button>
    <Dialog :title="title" @close="closeDialog">
      <p>这是对话框的内容</p>
      <template #header>
        <button @click="doSomething">自定义按钮</button>
      </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog.vue';

export default {
  components: {
    Dialog
  },
  data() {
    return {
      title: '对话框标题',
      showDialog: false
    };
  },
  methods: {
    closeDialog() {
      this.showDialog = false;
    },
    doSomething() {
      alert('自定义按钮被点击了');
    }
  }
};
</script>

在这个示例中，我们使用了`<template>`标签来定义一个名为`header`的插槽，并在其中放置了一个自定义按钮。当用户点击这个按钮时，点击事件将由父组件处理。

希望这可以帮助您自定义 Dialog 组件的右上角功能。