vue自己实现dialog

实现自定义 Dialog 组件

在 Vue 中实现自定义 Dialog 组件可以通过组合式 API 或选项式 API 完成。以下是核心实现思路和代码示例：

组件模板结构

<template>
  <div class="dialog-overlay" v-if="visible" @click.self="handleClose">
    <div class="dialog-container">
      <div class="dialog-header">
        <slot name="header">
          <h3>{{ title }}</h3>
          <button @click="handleClose">×</button>
        </slot>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <slot name="footer">
          <button @click="handleCancel">取消</button>
          <button @click="handleConfirm">确定</button>
        </slot>
      </div>
    </div>
  </div>
</template>

组件逻辑部分

<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'close', 'confirm', 'cancel'],
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    handleConfirm() {
      this.$emit('confirm')
      this.handleClose()
    },
    handleCancel() {
      this.$emit('cancel')
      this.handleClose()
    }
  }
}
</script>

样式部分

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

.dialog-container {
  background: white;
  border-radius: 4px;
  min-width: 300px;
  max-width: 80%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dialog-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-body {
  padding: 16px;
}

.dialog-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>

使用示例

<template>
  <button @click="showDialog = true">打开对话框</button>
  <CustomDialog 
    v-model:visible="showDialog"
    title="自定义标题"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>这是对话框的内容</p>
    <template #footer>
      <button @click="showDialog = false">自定义按钮</button>
    </template>
  </CustomDialog>
</template>

<script>
import CustomDialog from './CustomDialog.vue'

export default {
  components: { CustomDialog },
  data() {
    return {
      showDialog: false
    }
  },
  methods: {
    handleConfirm() {
      console.log('用户点击了确认')
    },
    handleCancel() {
      console.log('用户点击了取消')
    }
  }
}
</script>

进阶功能实现

动画效果

添加过渡动画可以提升用户体验，使用 Vue 的 transition 组件：

<template>
  <transition name="fade">
    <div class="dialog-overlay" v-if="visible" @click.self="handleClose">
      <transition name="slide">
        <div class="dialog-container">
          <!-- 对话框内容 -->
        </div>
      </transition>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from, .slide-leave-to {
  transform: translateY(-20px);
}
</style>

全局调用方式

通过 Vue 插件方式实现全局调用：

// dialogPlugin.js
import Dialog from './Dialog.vue'

export default {
  install(app) {
    const dialogConstructor = app.extend(Dialog)
    const instance = new dialogConstructor({
      el: document.createElement('div')
    })

    document.body.appendChild(instance.$el)

    app.config.globalProperties.$dialog = {
      show(options) {
        Object.assign(instance, options)
        instance.visible = true
      },
      hide() {
        instance.visible = false
      }
    }
  }
}

在 main.js 中使用：

import dialogPlugin from './dialogPlugin'
app.use(dialogPlugin)

组件内调用：

this.$dialog.show({
  title: '全局对话框',
  content: '这是通过全局方法调用的对话框'
})