1、在component文件夾中創(chuàng)建scyradio.vue

<template>
  <div class="co-radio__warp" @click="toggle">
    <input class="co-radio__checkbox" type="checkbox" :checked="value === checkedStatus" />
    <span class="co-radio__outer"></span>
    <label class="co-radio__title">{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: "scyRadio", // 組件名
  props: ["label", "value"], // 父級傳遞過來的值
  data() {
    return {
      checkedStatus: "",
    };
  },
  mounted() {},
  methods: {
    // 點擊事件
    toggle() {
      this.$parent.trigger("input", this.value); // 雙向數(shù)據(jù)綁定使用---v-model接收
      this.$parent.trigger("change", this.value); // change事件觸發(fā)
    },
  },
};
</script>

<style scoped>
.co-radio__warp {
  margin-right: 12px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.co-radio__checkbox {
  width: 0;
  opacity: 0;
}
.co-radio__outer {
  cursor: pointer;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  margin-bottom: -2px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s;
}

.co-radio__checkbox:checked + .co-radio__outer {
  border: 1px solid #1f282e;
  background-color: #1f282e;
}
.co-radio__checkbox:checked + .co-radio__outer::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-color: #1f282e;
  background-color: #1f282e;
  overflow: hidden;
}
.co-radio__checkbox:checked + .co-radio__outer::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}
</style>

2、在component文件夾中創(chuàng)建scyrodiogroup.vue

<template>
  <div class="co-radio-group" :class="size">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "scyRadioGroup",
  props: ["value", "size"],  // size大小
  mounted() {
    this.update();
  },
  methods: {
    update() {
      // 獲取子元素列表，并賦值
      this.$children.forEach((item) => (item.checkedValue = this.value));
    },
    // 告訴父組件傳值，第一個參數(shù)：方法名，第二個參數(shù)：值
    trigger(eventType, value) {
      this.$emit(eventType, value);
    },
  },
  watch: {
    value() {
      this.update();
    },
  },
};
</script>

<style scoped>
.small {
  height: 32px;
  line-height: 32px;
}
.medium {
  height: 36px;
  line-height: 36px;
}
</style>

3、在main.js中全局引入

// 自定義組件
import scyRadio from './components/scyradio.vue';
import scyRadioGroup from './components/scyrodiogroup.vue';

Vue.component('scy-radio', scyRadio)
Vue.component('scy-radio-group', scyRadioGroup)

4，使用單選，在components文件夾在創(chuàng)建test.vue文件

<template>
  <div class="content-radio">
  <!-- 多個放在一起使用 -->
    <scy-radio-group v-model="test" @change="changeTest">
      <scy-radio value='1' lable="數(shù)據(jù)1"></scy-radio>
      <scy-radio value='2' lable="數(shù)據(jù)2"></scy-radio>
    </scy-radio-group>
    <!-- 單個使用 -->
    <scy-radio :value='test' lable="數(shù)據(jù)1"></scy-radio>
  </div>
</template>
<script>
    export default {
           data() {
              return {
                  test: 1,
               };
            },
          methods:{ 
            //  單選選中的回調
              changeTest(value){
                console.oog(value); // 打印選中的值
            }
          }
}
</script>