当前位置：首页 > VUE

vue实现单选弹窗

2026-03-08 15:14:09VUE

Vue 实现单选弹窗的方法

使用组件库实现

Element UI、Ant Design Vue 等组件库提供了现成的弹窗和单选组件，可快速实现需求。

安装 Element UI：

npm install element-ui

示例代码：

<template>
  <div>
    <el-button @click="showDialog = true">打开弹窗</el-button>
    <el-dialog title="单选选择" :visible.sync="showDialog">
      <el-radio-group v-model="selectedOption">
        <el-radio v-for="option in options" :key="option.value" :label="option.value">
          {{ option.label }}
        </el-radio>
      </el-radio-group>
      <span slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  },
  methods: {
    handleConfirm() {
      console.log('选中:', this.selectedOption)
      this.showDialog = false
    }
  }
}
</script>

自定义弹窗实现

通过 v-if/v-show 控制弹窗显示，结合原生 radio 实现单选功能。

示例代码：

<template>
  <div>
    <button @click="isModalOpen = true">打开自定义弹窗</button>

    <div class="modal" v-if="isModalOpen">
      <div class="modal-content">
        <h3>请选择一项</h3>
        <div v-for="option in options" :key="option.value">
          <input 
            type="radio" 
            :id="option.value" 
            :value="option.value" 
            v-model="selectedOption"
          >
          <label :for="option.value">{{ option.label }}</label>
        </div>
        <button @click="isModalOpen = false">取消</button>
        <button @click="submitSelection">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false,
      selectedOption: null,
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' }
      ]
    }
  },
  methods: {
    submitSelection() {
      if (this.selectedOption) {
        console.log('已选择:', this.selectedOption)
        this.isModalOpen = false
      }
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 500px;
}
</style>

使用 Vuex 管理状态

当需要在多个组件间共享弹窗状态时，可使用 Vuex 进行状态管理。

store.js 示例：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    showDialog: false,
    selectedOption: null
  },
  mutations: {
    setDialogState(state, payload) {
      state.showDialog = payload
    },
    setSelectedOption(state, payload) {
      state.selectedOption = payload
    }
  }
})

组件中使用：

vue实现单选弹窗

<template>
  <el-dialog :visible="$store.state.showDialog" @update:visible="toggleDialog">
    <!-- 单选内容 -->
  </el-dialog>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['setDialogState']),
    toggleDialog(val) {
      this.setDialogState(val)
    }
  }
}
</script>