/**
* @Author think
* @Date 2019-07-10 14:04
*/

<template>
  <h-view title="CheckBox">
    <h-content>
      <list-item>
        <item>
          <section slot="name">注册国家</section>
          <radio-group slot="content" v-model="radioValue">
            <h-radio :checked="true" name="China" title="中国"/>
            <h-radio :disable="true" name="Japan" title="日本"/>
            <h-radio name="Other" title="其他"/>
          </radio-group>
        </item>
      </list-item>
      <radio-group v-model="radioValue">
        <h-radio name="China" title="中国"/>
        <h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
        <h-radio name="Other" title="其他"/>
      </radio-group>
      <list-item>
        <item>
          <h-check slot="left-icon" v-model="checkValue"/>
          <section slot="content">CheckBox</section>
        </item>
        <item>
          <div slot="name">switch滑块切换框</div>
          <div slot="content"><h-switch v-model="switchValue"/></div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
export default {
  name: 'RadioTest',
  data () {
    return {
      radioValue: 'Japan',
      checkValue: false,
      switchValue: false,
    }
  },
  watch: {
    radioValue (value) {
      console.log(value)
    },
  },
  methods: {},
}

</script>

<style scoped lang="less">
  .hls-list-item {
    .hls-item {
      .radio-group {
        display: flex;

        .h-radio {
          margin-right: 5px;
        }
      }
    }
  }
</style>
