<template>
  <demo-section>
    <demo-block :title="'单选按钮'">
      <drip-select-button
        :list="relTypeList"
        @getValue="selectRelType"
        :values="relType1">
      </drip-select-button>
    </demo-block>

    <demo-block :title="'多选按钮'">
      <drip-select-button
        :list="relTypeList"
        @getValue="selectRelType"
        :type="'multiple'"
        :values="relType2">
      </drip-select-button>
    </demo-block>

    <demo-block :title="'部分选项不可选'">
      <drip-select-button
        :list="relTypeList2"
        @getValue="selectRelType"
        :values="relType3"
        :width="'3rem'">
      </drip-select-button>
    </demo-block>

  </demo-section>
</template>

<script>
export default {
  data () {
    return {
      relTypeList: [{
        name: '本人',
        value: 1
      }, {
        name: '配偶',
        value: 2
      }, {
        name: '父母',
        value: 3
      }, {
        name: '子女',
        value: 4
      }],
      relTypeList2: [{
        name: '本人',
        value: 1
      }, {
        name: '配偶',
        value: 2,
        disabled: true,
      }, {
        name: '父母',
        value: 3
      }, {
        name: '子女',
        value: 4
      }],
      relType1: [1],
      relType2: [2],
      relType3: [1],
    }
  },
  methods: {
    selectRelType (val) {
      console.log(val)
    }
  }
}
</script>
