Radio 单选框

基础用法

<template>
  <plv-radio v-model="checked" label="备选项" />
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      };
    }
  };
</script>

显示代码

禁言状态 & 只读状态

<template>
  <div>
    <plv-radio disabled :checked="false">未选中项</plv-radio>
    <plv-radio disabled :checked="true">已选中项</plv-radio>
    <plv-radio readonly :checked="false">未选中项</plv-radio>
    <plv-radio readonly :checked="true">已选中项</plv-radio>
  </div>
</template>

显示代码

单选框组

<template>
  <div>
    <div class="demo-radio-group">
      <plv-radio-group v-model="sex">
        <plv-radio value="male">男</plv-radio>
        <plv-radio value="female">女</plv-radio>
      </plv-radio-group>
    </div>
    <div class="demo-radio-group">
      <plv-radio-group
        v-model="sex"
        :radios="radios" />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sex: '',
        radios: [{
          label: '男',
          value: 'male'
        }, {
          label: '女',
          value: 'female'
        }]
      };
    }
  };
</script>

<style lang="scss" scoped>
.demo-radio-group + .demo-radio-group {
  margin-top: 10px;
}
</style>

显示代码

边框型选项

<template>
  <div>
    <plv-radio type="border" :checked="false">未选中项</plv-radio>
    <plv-radio type="border" :checked="true">已选中项</plv-radio>
    <plv-radio type="border" :checked="false" disabled>未选禁用项</plv-radio>
    <plv-radio type="border" :checked="true" disabled>已选禁用项</plv-radio>
    <plv-radio type="border" :checked="false" readonly>未选只读项</plv-radio>
    <plv-radio type="border" :checked="true" readonly>已选只读项</plv-radio>
  </div>
</template>

显示代码

Radio Attributes

参数	说明	类型	可选值	默认值
checked / v-model	单选框是否选中	Boolean	-	false
value	绑定值	String Number Boolean	-	-
label	单选框的文本	String	-	-
trueLabel	选中时的文本，优先级高于label	String	-	-
falseLabel	没有选中时的文本，优先级高于label	String	-	-
type	单选框样式	String	border	-
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false
corner	选中时是否显示右下角标记	Boolean	-	false

Radio Events

事件名称	说明	回调参数
change	选中状态改变后触发	checked 是否选中

Radio Slot

name	说明
—	单选框文本
trueLabel	选中时的文本，优先级高于label
falseLabel	没有选中时的文本，优先级高于label

Radio-group Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String, Number Boolean	-	-
type	复选框样式	String	border	-
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false
radios	单选框选项（[{ label, value }]）	Array	-	[]

Radio-group Events

事件名称	说明	回调参数
change	绑定值改变后触发	value 改变后的值

Radio-group Slot

name	说明
—	单选框选项