vue手动实现dialog

手动实现 Vue Dialog 组件

在 Vue 中手动实现一个 Dialog（对话框）组件，可以通过组合 Vue 的组件系统、插槽（slot）和自定义事件来完成。以下是实现步骤和代码示例：

创建 Dialog 组件

创建一个基本的 Dialog 组件，包含标题、内容和操作按钮。使用 v-model 控制显示/隐藏状态。

<template>
  <div class="dialog-overlay" v-if="visible" @click.self="close">
    <div class="dialog">
      <div class="dialog-header">
        <h3>{{ title }}</h3>
        <button @click="close" class="close-btn">×</button>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <button @click="close">取消</button>
        <button @click="confirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('confirm');
      this.close();
    }
  }
};
</script>

<style scoped>
.dialog-overlay {
  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;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 4px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 2px 10px 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;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
</style>

使用 Dialog 组件

在父组件中使用 Dialog，并通过 v-model 控制其显示/隐藏状态。

<template>
  <div>
    <button @click="showDialog = true">打开对话框</button>
    <Dialog v-model:visible="showDialog" title="自定义标题" @confirm="handleConfirm">
      <p>这是对话框的内容，可以通过插槽自定义。</p>
    </Dialog>
  </div>
</template>

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

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

动态控制 Dialog

可以通过方法动态控制 Dialog 的显示和隐藏，例如在异步操作完成后关闭 Dialog。

<template>
  <div>
    <button @click="showDialog = true">打开对话框</button>
    <Dialog v-model:visible="showDialog" @confirm="submitForm">
      <form @submit.prevent="submitForm">
        <input v-model="inputValue" placeholder="输入内容" />
      </form>
    </Dialog>
  </div>
</template>

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

export default {
  components: { Dialog },
  data() {
    return {
      showDialog: false,
      inputValue: ''
    };
  },
  methods: {
    submitForm() {
      if (this.inputValue) {
        console.log('提交的内容:', this.inputValue);
        this.showDialog = false;
      }
    }
  }
};
</script>

扩展功能

可以通过扩展 Dialog 组件，支持更多自定义功能，例如：

• 自定义按钮文本
• 异步加载内容
• 动画效果

<template>
  <div class="dialog-overlay" v-if="visible" @click.self="close">
    <div class="dialog" :class="{ 'dialog-animate': animate }">
      <div class="dialog-header">
        <h3>{{ title }}</h3>
        <button @click="close" class="close-btn">×</button>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <button @click="close">{{ cancelText }}</button>
        <button @click="confirm" :disabled="loading">
          {{ loading ? loadingText : confirmText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: String,
    visible: Boolean,
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    loading: {
      type: Boolean,
      default: false
    },
    loadingText: {
      type: String,
      default: '加载中...'
    },
    animate: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('confirm');
    }
  }
};
</script>

<style scoped>
.dialog-animate {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

通过以上方法，可以手动实现一个功能丰富且灵活的 Vue Dialog 组件，满足不同场景的需求。