Element Plus Pro

Appearance

单选框组 Pro ​

对单选框组进行扩展。

基础用法 ​

size="small"

size="default"

size="large"

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProRadioGroup } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  radioValue1: [],
  radioValue2: [],
  radioValue3: [],
  radioData: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProRadioGroup :data="state.radioData" v-model="state.radioValue1" size="small" />
  <h4>size="default"</h4>
  <ProRadioGroup :data="state.radioData" v-model="state.radioValue2" size="default" />
  <h4>size="large"</h4>
  <ProRadioGroup :data="state.radioData" v-model="state.radioValue3" size="large" />
</template>

<style lang="scss" scoped>
h4 {
  padding: 15px 0;
}
</style>

按钮样式 ​

size="small"

size="default"

size="large"

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProRadioGroup } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  radioValue1: [],
  radioValue2: [],
  radioValue3: [],
  radioData: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProRadioGroup
    :data="state.radioData"
    v-model="state.radioValue1"
    size="small"
    radio-type="button"
  />
  <h4>size="default"</h4>
  <ProRadioGroup
    :data="state.radioData"
    v-model="state.radioValue2"
    size="default"
    radio-type="button"
  />
  <h4>size="large"</h4>
  <ProRadioGroup
    :data="state.radioData"
    v-model="state.radioValue3"
    size="large"
    radio-type="button"
  />
</template>

<style lang="scss" scoped>
h4 {
  padding: 15px 0;
}
</style>

显示&禁用 ​

基础控制

display: true | false

disabled: true | false

动态控制

display: function (radio) { ... return true | false }

disabled: function (radio) { ... return true | false }

整体禁用

disabled: true | false

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProRadioGroup } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  // 基础控制
  radioValue1: [],
  radioData1: [
    { label: '北京', value: 'beijing', display: false },
    { label: '上海', value: 'shanghai', disabled: true },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ],
  // 动态控制
  radioValue2: [],
  radioData2: [
    { label: '北京', value: 'beijing', display: (radio) => false },
    { label: '上海', value: 'shanghai', disabled: (radio) => true },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ],
  // 整体禁用
  radioValue3: [],
  radioData3: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>基础控制</h4>
  <p>display: true | false</p>
  <p>disabled: true | false</p>
  <ProRadioGroup :data="state.radioData1" v-model="state.radioValue1" size="small" />
  <h4>动态控制</h4>
  <p>display: function (radio) { ... return true | false }</p>
  <p>disabled: function (radio) { ... return true | false }</p>
  <ProRadioGroup :data="state.radioData2" v-model="state.radioValue2" size="default" />
  <h4>整体禁用</h4>
  <p>disabled: true | false</p>
  <ProRadioGroup :data="state.radioData3" v-model="state.radioValue3" size="default" disabled />
</template>

<style lang="scss" scoped>
h4 {
  padding: 25px 0 0;
}
</style>

事件 ​

ProRadioGroup API ​

属性说明类型默认值
model-value/v-model绑定值String Number Boolean-
radio-type单选框类型String: button、defaultdefault
size单选框大小String: large、default、small-
disabled单选框组整体禁用Booleanfalse
text-color按钮形式的 Radio 激活时的文本颜色String#ffffff
validate-event输入时是否触发表单的校验Booleantrue
label与 RadioGroup 中的aria-label属性相同String-
name原生 name 属性String-
id原生 id 属性String-
data单选框配置数据
[详见【Radio API】]		Array[Object][]

Radio API ​

属性说明类型默认值
value单选框的值String Number Boolean-
label单选框文本String Number Boolean-
border是否显示边框Booleanfalse
size单选框大小String: large、default、small-
name原生 name 属性String-
display单选框显示控制Boolean: true | false
Function: (data) => Boolean		true
disabled单选框禁用控制Boolean: true | false
Function: (data) => Boolean		false

Events ​

Slots ​