vue实现单选弹窗

Vue 实现单选弹窗的方法

使用 Element UI 的 Dialog 和 Radio 组件

安装 Element UI 后，可以通过 Dialog 和 Radio 组件快速实现单选弹窗功能。

<template>
  <div>
    <el-button @click="dialogVisible = true">打开单选弹窗</el-button>

    <el-dialog title="请选择" :visible.sync="dialogVisible">
      <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" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

自定义单选弹窗组件

如果需要更灵活的控制，可以创建自定义单选弹窗组件。

<template>
  <div class="custom-dialog" v-if="visible">
    <div class="dialog-content">
      <h3>{{ title }}</h3>
      <div class="radio-group">
        <div 
          v-for="option in options" 
          :key="option.value" 
          class="radio-item"
          @click="selectOption(option.value)"
        >
          <span :class="{ selected: selectedOption === option.value }"></span>
          {{ option.label }}
        </div>
      </div>
      <div class="dialog-footer">
        <button @click="cancel">取消</button>
        <button @click="confirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    options: Array,
    value: String
  },
  data() {
    return {
      selectedOption: this.value
    }
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value
    },
    cancel() {
      this.$emit('cancel')
    },
    confirm() {
      this.$emit('confirm', this.selectedOption)
    }
  }
}
</script>

<style scoped>
.custom-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}

.radio-item {
  padding: 10px;
  cursor: pointer;
}

.radio-item span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 10px;
}

.radio-item span.selected {
  background: #409EFF;
  border-color: #409EFF;
}

.dialog-footer {
  margin-top: 20px;
  text-align: right;
}
</style>

使用 Vuex 管理弹窗状态

对于复杂应用，可以使用 Vuex 来管理弹窗状态和选择结果。

// store.js
export default new Vuex.Store({
  state: {
    radioDialog: {
      visible: false,
      options: [],
      selected: null
    }
  },
  mutations: {
    showRadioDialog(state, options) {
      state.radioDialog.visible = true
      state.radioDialog.options = options
    },
    hideRadioDialog(state) {
      state.radioDialog.visible = false
    },
    selectOption(state, value) {
      state.radioDialog.selected = value
    }
  }
})

// 组件中使用
<template>
  <div>
    <button @click="showDialog">打开弹窗</button>
    <radio-dialog 
      v-if="$store.state.radioDialog.visible"
      :options="$store.state.radioDialog.options"
      :selected="$store.state.radioDialog.selected"
      @select="selectOption"
      @confirm="confirmSelection"
      @cancel="hideDialog"
    />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['showRadioDialog', 'hideRadioDialog', 'selectOption']),
    showDialog() {
      const options = [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
      this.showRadioDialog(options)
    },
    confirmSelection() {
      console.log('选中:', this.$store.state.radioDialog.selected)
      this.hideDialog()
    }
  }
}
</script>

使用第三方插件 vue-js-modal

vue-js-modal 是一个流行的 Vue 模态框插件，可以方便地实现单选弹窗。

// 安装后
import VModal from 'vue-js-modal'
Vue.use(VModal)

// 组件中使用
<template>
  <div>
    <button @click="showModal">打开弹窗</button>

    <modal name="radio-modal">
      <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="hideModal">取消</button>
      <button @click="submit">确定</button>
    </modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
    }
  },
  methods: {
    showModal() {
      this.$modal.show('radio-modal')
    },
    hideModal() {
      this.$modal.hide('radio-modal')
    },
    submit() {
      console.log('选中:', this.selectedOption)
      this.hideModal()
    }
  }
}
</script>

以上方法提供了不同复杂度的实现方案，可以根据项目需求选择合适的方式来实现 Vue 单选弹窗功能。