<template>
  <div class="my-radio">
    <label :for="item.value" class="label" v-for="item in radiaArr" :key="item.name">
      <input type="radio" :id="item.value" name="s" :value="item.value" @change="changeValue" :checked="item.value === radioValue" />
      <span class="custom"></span>
      <span class="name">{{item.name}}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "MyRadio",
  props:{
    radiaArr:{

    },
    radioValue:{

    }
  },
  model:{
    prop:"radioValue",
    event:"change"
  },
  methods:{
    changeValue(e) {
      this.$emit("change",e.target.value)
    }
  }
}
</script>

<style scoped lang="scss">
.my-radio{
  .label{
    .name{
      margin-left:  6px;
      vertical-align: middle;
      font-size: 14px;
      color: #fff;
    }
    input[type = 'radio']{
      width: 11px;
      height: 11px;
      position: relative;
      z-index: 1;
      left: 11px;
      opacity: 0;
      &:checked + .custom {
        //display: flex;
        //align-items: center;
        //justify-content: center;
        position: relative;
        &::before{
          content: "";
          width: 5px;

          height: 5px;
          //position: absolute;
          border-radius: 50%;
          position: absolute;
          top: 2px;
          left: 2px;
          margin: auto;
          box-sizing: border-box;
          background-color: #fff;

        }
      }


    }

    .custom{

      box-sizing: border-box;
      border: 1px solid #fff;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
