vue自定义单选框radio

vue自定义radio单选框，radio默认样式修改，vue radio单选框，使用v-for循环的radio单选框，js自定义radio单选框 

1.效果演示

2.代码示例： 

<template>
  <div class="real-name-page" @click="menuDialog = false">
    <div class="real-content">
      <!-- 按钮 -->
      <div class="menu-btn" @click.stop="openMenu()">
        <div class="menu-name">{{ currentUnit ? currentUnit : "全部" }}</div>
        <img class="arrow-down" src="../../assets/images/arrow-dowm.png" />
      </div>
      <!-- 菜单弹窗 -->
      <div class="menu-dialog" v-if="menuDialog">
        <!-- 单选框 -->
        <div class="item" v-for="(item, index) in tabs" :key="index">
          <label class="item-radio" @click="tabChange(item, index)">
            <div
              class="icon"
              :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" lang="scss">
.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>

 如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，你的鼓励将是我创作的最大动力!

qq群933053581