Skip to content

Latest commit

 

History

History
178 lines (157 loc) · 4.07 KB

radio.md

File metadata and controls

178 lines (157 loc) · 4.07 KB

radio 单选框

基础用法

<template>
  <pl-radio v-model:value="value" :options="data" />
</template>
<script>
  export default {
    data () {
      return {
        value: [],
        data: [
          {label: '选项1', value: 1, disabled: false},
          {label: '选项2', value: 2, disabled: true}
        ]
      }
    }
  }
</script>

按钮样式

<template>
  <pl-radio v-model:value="value" :options="data" button />
</template>
<script>
  export default {
    data () {
      return {
        value: [],
        data: [
          {label: '选项1', value: 1, disabled: false},
          {label: '选项2', value: 2, disabled: true}
        ]
      }
    }
  }
</script>

竖向排列

<template>
  <pl-radio v-model:value="value" :options="data" vertical />
</template>
<script>
  export default {
    data () {
      return {
        value: [],
        data: [
          {label: '选项1', value: 1, disabled: false},
          {label: '选项2', value: 2, disabled: true}
        ]
      }
    }
  }
</script>

显示label的用法

<template>
  <pl-radio v-model:value="value" :options="data" label="请选择:" labelWidth="5em" />
</template>
<script>
  export default {
    data () {
      return {
        value: [],
        data: [
          {label: '选项1', value: 1, disabled: false},
          {label: '选项2', value: 2, disabled: true}
        ]
      }
    }
  }
</script>

表单验证

<template>
  <pl-radio v-model:value="value" :options="data" :rules="rules" required ref="radio" />
</template>
<script>
  export default {
    data () {
      return {
        value: [],
        data: [
          {label: '选项1', value: 1, disabled: false},
          {label: '选项2', value: 2, disabled: true}
        ],
        rules: [{required: true, message: '请选择', trigger: 'change', type: 'number'}]
      }
    },
    methods: {
      submit () {
        this.$refs.radio.validate().then(() => {
          // 校验成功
        }).catch(e => {
          // 校验失败
        })
      }
    }
  }
</script>

自定义子项

<template>
  <pl-radio v-model:value="value" :options="data">
    <template v-slot="scope">{{scope.item.label}} - {{scope.item.value}}</template>
  </pl-radio>
</template>
<script>
  export default {
    data () {
      return {
        value: [],
        data: [
          {label: '选项1', value: 1, disabled: false},
          {label: '选项2', value: 2, disabled: true}
        ]
      }
    }
  }
</script>

Attributes

参数 说明 类型 可选值 默认值
rules 验证规则 rules Array
size 尺寸 String normal / large / small normal
options 选项列表 Array
prop 选项对应的key与value Object {label: 'label', value: 'value', disabled: 'disabled'}
wrap label是否折行显示 boolean false
disabled 是否禁用状态 boolean false
required 必填红色*号 boolean false
button 是否是按钮样式 boolean false
vertical 是否是竖向排列 boolean false
showError 是否在表单中显示错误信息 boolean true
label label文字 string
labelWidth label宽度 string

Slots

name 说明
(default) 列表子选项
label label文字
prepend 输入框前置内容

Events

事件名称 说明 回调参数
change value更改事件 更改后的value

Methods

方法名 说明 参数
validate 表单验证方法
clearValidate 清除验证错误提示