基础用法

• 与elm较为不同的是通过options来设置并不是在dom上添加

<template>
  <higher-radio
    v-model="sendData"
    :options="options"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: null,
        options: {
          list: [{
            label: '选项1',
            value: 'option1'
          }, {
            label: '选项2',
            value: 'option2'
          }, {
            label: '选项3',
            value: 'option3'
          }, {
            label: '选项4',
            value: 'option4'
          }]
        }
      }
    }
  }
</script>

Expand Copy Copy

禁用状态

• 设置disabled属性即可。

<template>
  <higher-radio
    v-model="sendData"
    :options="options"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: 'option2',
        options: {
          list: [{
            label: '选项1',
            value: 'option1'
          }, {
            label: '选项2',
            value: 'option2',
            disabled: true
          }, {
            label: '选项3',
            value: 'option3',
            disabled: true
          }, {
            label: '选项4',
            value: 'option4'
          }]
        }
      }
    }
  }
</script>

Expand Copy Copy

带有边框

• 设置border属性可以渲染为带有边框的多选框。
• 也可以通过直接添加 border为true来设置全部为带边框

<higher-radio
  v-model="sendData"
  :options="options"
  border
/>

<template>
  <higher-radio
    v-model="sendData"
    :options="options"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: '',
        options: {
          list: [{
            label: '选项1',
            value: 'option1',
            border: true
          }, {
            label: '选项2',
            value: 'option2'
          }, {
            label: '选项3',
            value: 'option3'
          }, {
            label: '选项4',
            value: 'option4'
          }]
        }
      }
    }
  }
</script>

Expand Copy Copy

按钮样式

只需要把component-name的值替换为radio-button即可

<template>
  <div>
    <higher-radio
      v-model="radio1"
      :options="options"
      component-name="radio-button"
    />
    <higher-radio
      style="margin-top:20px;"
      size="medium"
      v-model="radio2"
      :options="options"
      component-name="radio-button"
    />
    <higher-radio
      style="margin-top:20px;"
      size="small"
      v-model="radio3"
      :options="options"
      component-name="radio-button"
    />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        radio1: 'option1',
        radio2: 'option1',
        radio3: 'option1',
        options: {
          list: [{
            label: '上海',
            value: 'option1'
          }, {
            label: '北京',
            value: 'option2'
          }, {
            label: '广州',
            value: 'option3'
          }, {
            label: '深圳',
            value: 'option4'
          }]
        }
      };
    }
  }
</script>

Expand Copy Copy