vue实现弹出配置框

使用 Vue 实现弹出配置框

基础弹窗实现

通过 Vue 的 v-if 或 v-show 控制弹窗显示隐藏，结合 CSS 实现基础样式：

<template>
  <div>
    <button @click="showModal = true">打开配置框</button>
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <h3>配置选项</h3>
        <input v-model="configValue" placeholder="输入配置值">
        <button @click="saveConfig">保存</button>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      configValue: ''
    }
  },
  methods: {
    saveConfig() {
      console.log('保存配置:', this.configValue);
      this.showModal = false;
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

使用组件化方式

创建可复用的弹窗组件 (Modal.vue)：

<!-- Modal.vue -->
<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
      <slot name="header"></slot>
      <slot name="body"></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean
  }
}
</script>

在父组件中使用：

<template>
  <div>
    <button @click="showModal = true">打开配置框</button>
    <Modal :visible="showModal">
      <template v-slot:header>
        <h3>配置选项</h3>
      </template>
      <template v-slot:body>
        <input v-model="configValue">
      </template>
      <template v-slot:footer>
        <button @click="saveConfig">保存</button>
        <button @click="showModal = false">关闭</button>
      </template>
    </Modal>
  </div>
</template>

使用第三方库

对于更复杂的需求，可以使用现成的 UI 库：

1. Element UI 弹窗：

<template>
  <div>
    <el-button @click="dialogVisible = true">打开配置框</el-button>
    <el-dialog title="配置" :visible.sync="dialogVisible">
      <el-input v-model="configValue"></el-input>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveConfig">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

1. Vuetify 弹窗：

<template>
  <v-btn @click="dialog = true">打开配置框</v-btn>
  <v-dialog v-model="dialog" max-width="500px">
    <v-card>
      <v-card-title>配置选项</v-card-title>
      <v-card-text>
        <v-text-field v-model="configValue"></v-text-field>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="dialog = false">关闭</v-btn>
        <v-btn color="primary" @click="saveConfig">保存</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

动画效果增强

为弹窗添加过渡动画：

<template>
  <transition name="modal">
    <div v-if="showModal" class="modal">
      <!-- 内容 -->
    </div>
  </transition>
</template>

<style>
.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
}
</style>

全局弹窗管理

通过 Vuex 或事件总线管理全局弹窗状态：

// store.js
export default new Vuex.Store({
  state: {
    modal: {
      show: false,
      content: ''
    }
  },
  mutations: {
    showModal(state, content) {
      state.modal.show = true
      state.modal.content = content
    }
  }
})

在组件中调用：

this.$store.commit('showModal', '配置内容')