直播平台源代码，vue自定义单选框radio
<template>
<div @click="menuDialog = false">
<div>
<!-- 按钮 -->
<div @click.stop="openMenu()">
<div>{{ currentUnit ? currentUnit : "全部" }}</div>
<img src="../../assets/images/arrow-dowm.png" />
</div>
<!-- 菜单弹窗 -->
<div v-if="menuDialog">
<!-- 单选框 -->
<div v-for="(item, index) in tabs" :key="index">
<label @click="tabChange(item, index)">
<div
:class="{ itemActive: activeIndex === index }"
></div>
<input type="radio" v-model="radioVal" :key="index" :value="item" />
{{ item }}
</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "mobileHome",
components: {},
data() {
return {
radioVal: "全部", // 用于设置默认选中项
menuDialog: false,
tabs: ["全部"],
radioData: ["第一", "第二", "第三"],
activeIndex: 0,
currentUnit: "", //单前单位
};
},
computed: {},
mounted() {
this.tabs = ["全部", ...this.radioData];
this.tabChange();
this.activeIndex = 0;
},
methods: {
/**切换选项 */
tabChange(item, index) {
this.activeIndex = index;
if (item === "全部") {
this.currentUnit = "";
} else {
this.currentUnit = item;
}
this.menuDialog = false;
},
/**打开弹窗 */
openMenu() {
this.menuDialog = true;
},
},
};
</script>
<style scoped="scoped">
.real-name-page {
width: 100vw;
height: 100vh;
background: #eef4f4;
//弹窗按钮
.menu-btn {
padding: 3%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 40px;
box-shadow: 0px 10px 10px rgba(37, 42, 52, 0.1);
.menu-name {
font-weight: 500;
width: 55%;
text-align: right;
}
.arrow-down {
padding-left: 10%;
width: 6%;
height: 3%;
margin: 0 auto;
}
}
//去除radio默认样式
input[type="radio"] {
display: none;
}
//弹窗
.menu-dialog {
width: 100%;
position: absolute;
top: 0;
width: 100%;
padding-top: 15%;
width: 100vw;
height: 100vh;
background: rgba(18, 18, 19, 0.3);
display: flex;
flex-direction: column;
.item {
width: 100%;
background: #ffffff;
.item-radio {
margin: 0 auto;
display: flex;
width: 70%;
padding: 2% 0 3% 18%;
background: #ffffff;
border-top: 2px solid rgba(213, 216, 218, 0.904) !important;
}
//未选中样式
.icon {
margin-right: 5%;
width: 7%;
background: url("../../assets/images/no-select.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
//选中样式
.itemActive {
margin-right: 5%;
width: 7%;
background: url("../../assets/images/select.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
.real-content {
padding: 2% 3% 6%;
}
}
</style>
以上就是 直播平台源代码，vue自定义单选框radio，更多内容欢迎关注之后的文章