直播平台源代码，vue自定义单选框radio

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