手摸手之vue单选组件

序

• 书写组件来代替重复性的开发，可能是现在最常用的开发方式
• 本次是一个单选组件，现在基本上可以说是个ui框架都有单选组件。换句话说，你连一个单选组件都没有好意思说自己是个ui框架（开玩笑）
• 那么为什么还要自己写呢？ 不说社区有多少选择，单说写了 好不好用，我也不敢打包票，但是别人的哪有自己的香的（狗不嫌家贫，丑儿子也是儿不是）

开始

• 其实之前我看ui框架的单选组件时，我总是在想它是怎么写的？ 后来某次翻看vue文档时 我就明白了🐷！
• 在vue的文档中有一章叫做 表单输入绑定 其中有一章是介绍单选按钮的。
• 单选按钮的值绑定 同其他是一样的 通过 v-model 来绑定， 布尔值
• 到这里可能有的人会说了 就这？ 直接看文档不香吗？ 文档自然是香的 但是有多少人会认真去看呢？

自定义单选(支持 自定义组件 v-model )

  <template>
  <!--  一些简单布局  没啥好说的  :id="uuid + item.key" 是防止重复id，id 重复会出现 点a b相应的情况 -->
    <div class="radioButtonGroup">
      <div class="radioButtonItem" v-for="(item, index) in dataList"  :key="index">
        <input type="radio"
               :id="uuid + item.key"
               :value="item.key"
               v-model="picked"
               @change="$emit('change', picked)">
        <label :for="uuid + item.key">{{item.value}}</label>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: "index",
    // 组件自定义 v-model
    model: {
      prop: 'active', // 绑定的参数
      event: 'change' // 触发的事件
    },
    // 接收参数
    props: {
      active: {
        type: [String, Number, Boolean], // 定义参数类型
        required: true  // 参数必填验证
      },
      dataList: { // 生成单选按钮的数组
        type: Array,
        default: []
      }
    },
    data () {
      return {
        picked: 1,
        uuid: ''
      }
    },
    created() {
      this.uuid = this.toolSet.uuid() // 生成非重复id
      this.picked = this.active // 设置默认选中数据
    }
  }
  </script>

  <style lang="stylus" scoped>
  .radioButtonGroup{
    display flex
    .radioButtonItem{
      // 隐藏 单选按钮的选中 ⚪
      input[type='radio'] {
        display none
        cursor: pointer;
        position: relative;
        visibility: hidden;
      }

      // 更改单选按钮的样式
      label{
        display inline-block
        padding 0 1vw
        height 3vh
        line-height 3vh
        margin-right 2px
        cursor pointer
        color #ffffff
        background #3E649C
        border 1px solid #142F82
      }

      // 更改单选按钮的选中样式
      input[type='radio']:checked + label{
        color #ffffff
        background #142F82
        border 1px solid #3E649C
      }
    }
  }

  </style>

• 效果大概是 长这样（丑是丑了点，但是你可以自己改啊！）