<template>
    <div class="ht-base-radio-custorm-demo">
        <ht-base-radio-group v-model="button1" type="button">
            <ht-base-radio label="北京"></ht-base-radio>
            <ht-base-radio  label="上海"></ht-base-radio>
            <ht-base-radio  label="深圳"></ht-base-radio>
            <ht-base-radio  label="杭州"></ht-base-radio>
        </ht-base-radio-group>
        <br/>
        <br/>
        <ht-base-radio-group v-model="button2" type="button">
            <ht-base-radio  label="北京"></ht-base-radio>
            <ht-base-radio  label="上海" disabled></ht-base-radio>
            <ht-base-radio  label="深圳"></ht-base-radio>
            <ht-base-radio  label="杭州"></ht-base-radio>
        </ht-base-radio-group>
        <br/>
        <br/>
        <ht-base-radio-group v-model="button3" type="button">
            <ht-base-radio  label="北京" disabled></ht-base-radio>
            <ht-base-radio  label="上海" disabled></ht-base-radio>
            <ht-base-radio  label="深圳" disabled></ht-base-radio>
            <ht-base-radio  label="杭州" disabled></ht-base-radio>
        </ht-base-radio-group>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseRadioCustormDemo',
      data () {
          return {
              button1: '北京',
              button2: '北京',
              button3: '北京'
          }
      }
  }
</script>
<style lang="less">
    .ht-base-radio-custorm-demo {
        .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child{
            border-radius:  5px 0 0 5px;
        }
        .ivu-radio-group-button .ivu-radio-wrapper:last-child{
            border-radius: 0 5px 5px 0;
        }
    }
</style>

