Win Design

Radio 单选按钮

代码演示

基础用法

单选按钮组件最基础用法。

查看代码 < />

<template>
  <w-radio v-model="value" label="1">是</w-radio>
  <w-radio v-model="value" label="2">否</w-radio>
</template>
<script>
  export default {
    data () {
      return {
        value: '1'
      }
    }
  }
</script>

禁用状态

为组件添加 disabled 属性即可禁用单选按钮。

查看代码 < />

<template>
  <w-radio v-model="value" label="1" disabled>是</w-radio>
  <w-radio v-model="value" label="2" disabled>否</w-radio>

  <br />
  <w-radio-group v-model="value1" disabled style="margin-top:16px;">
    <w-radio :label="1">是</w-radio>
    <w-radio :label="2">否</w-radio>
    <w-radio :label="3">不详</w-radio>
  </w-radio-group>
</template>
<script>
  export default {
    data () {
      return {
        value: '2',
        value1: 3
      }
    }
  }
</script>

单选组

使用w-radio-group组件包裹w-radio的形式就可以形成一个按钮组。

查看代码 < />

<template>
  <w-radio-group v-model="value">
    <w-radio :label="1">自费</w-radio>
    <w-radio :label="2">本地医保</w-radio>
    <w-radio :label="3">其他</w-radio>
  </w-radio-group>
</template>
<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  }
</script>

带边框的单选框

为 w-radio组件添加 border属性即可让多选框拥有描边效果。

查看代码 < />

<template>
  <w-radio-group v-model="value">
    <w-radio :label="1" border>中医</w-radio>
    <w-radio :label="2" border>西医</w-radio>
    <w-radio :label="3" border>中西合璧</w-radio>
    <w-radio :label="4" border disabled>其他</w-radio>
  </w-radio-group>
</template>
<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  }
</script>




按钮样式

w-radio-group包裹w-radio-button组件可以组成按钮样式的多选框组。

查看代码 < />

<template>
  <w-radio-group v-model="value0" size="large" plain discrete>
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value" size="large" plain>
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value2" size="medium">
    <w-radio-button :label="1" disabled>自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value3" size="small">
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value4" size="mini">
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4" disabled>其他</w-radio-button>
  </w-radio-group>
</template>
<script>
  export default {
    data () {
      return {
        value0: 1,
        value: 1,
        value2: 1,
        value3: 1,
        value4: 1
      }
    }
  }
</script>




圆角按钮样式

为w-radio-group添加round属性, 可以让按钮样式变为圆角形式.

查看代码 < />

<template>
  <w-radio-group v-model="value0" size="large" round discrete>
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value" size="large" round>
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value2" size="medium" round>
    <w-radio-button :label="1" disabled>自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value3" size="small" round>
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4">其他</w-radio-button>
  </w-radio-group>
  <br />
  <w-radio-group v-model="value4" size="mini" round>
    <w-radio-button :label="1">自费</w-radio-button>
    <w-radio-button :label="2">医保</w-radio-button>
    <w-radio-button :label="3">本地</w-radio-button>
    <w-radio-button :label="4" disabled>其他</w-radio-button>
  </w-radio-group>
</template>
<script>
  export default {
    data () {
      return {
        value0: 1,
        value: 1,
        value2: 1,
        value3: 1,
        value4: 1
      }
    }
  }
</script>

API

Radio 、Radio-Button Attributes

参数 说明 类型 可选值 默认值 Version
border 是否加边框样式(仅radio生效) Boolean — false
disabled 是否禁用 Boolean — false
label Radio 的 value String / Number / Boolean — —
name 原生 name 属性 String — —

Radio 、Radio-Button Events

事件名称 说明 回调参数 Version
change 绑定值变化时触发的事件 选中的 Radio label 值

Radio-Group Attributes

参数 说明 类型 可选值 默认值 Version
discrete 按钮组是否离散(按钮不相连) Boolean — — v1.7.10
disabled 是否禁用 Boolean — false v1.7.12
plain 轻量级按钮组 Boolean — — v1.5.1
round 圆角按钮样式(仅按钮样式组可用) Boolean — — v1.5.0

Radio-group Events

事件名称 说明 回调参数 Version
change 绑定值变化时触发的事件 选中的 Radio label 值

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 12/23/2020, 2:14:42 PM

← Select 选择器 →