在前端開發中，彈出框和單選框都是常用的組件。而Vue中的popup-radio，也就是彈出框單選框組合組件，可以輕松地實現這兩種常用的功能。

使用popup-radio可以方便地在一個彈出框中展示多個選項并讓用戶選擇其中一個，具有交互友好、使用方便等優點。

// 安裝popup-radio
npm install popup-radio --save

引入popup-radio后，需要在Vue實例中注冊使用，然后在組件中使用。

// 公共組件 component/popup-radio.vue
<template>
<div class="popup-radio">
<div class="title">{{ title }}</div>
<div class="content">
<div class="option" v-for="(item, index) in options" :key="index" @click="onChange(item.value)" :class="{ active: item.value === value }">
<div class="icon">
<div class="selected-icon" v-if="item.value === value"></div>
</div>
<div class="text">{{ item.text }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'popup-radio',
props: {
title: {
type: String,
default: '請選擇'
},
options: {
type: Array,
default() {
return []
}
},
value: {
type: [String, Number],
default: ''
}
},
methods: {
onChange(value) {
this.$emit('input', value)
this.$emit('change', value)
}
}
}
</script>

在父組件中使用popup-radio組件，只需在模板中引用即可。同時需要在父組件中定義選項數組和選中值變量。

<template>
<div class="wrapper">
<div class="select" @click="isShow = true">{{ selected }}</div>
<popup-radio v-if="isShow" :options="options" v-model="selected"></popup-radio>
</div>
</template>
<script>
import PopupRadio from 'popup-radio';
export default {
name: 'App',
components: {
PopupRadio,
},
data() {
return {
isShow: false,
selected: '',
options: [
{ text: '選項1', value: 'option1' },
{ text: '選項2', value: 'option2' },
{ text: '選項3', value: 'option3' },
],
}
},
}
</script>

使用上述代碼，就可以實現一個簡單的popup-radio彈出框單選框組合組件。

最后，popup-radio可以根據具體場景進行樣式和功能的定制，比如根據需求添加標題、添加樣式等等。整個組件結構簡單，使用方便，非常適合開發中遇到彈出框單選框組合的場景。