Element Plus Pro

Appearance

按钮组 Pro ​

对基础按钮组进行扩展，启用左间隔方式可拆分多个分组展现，支持配置子按钮。

基础用法 ​

size="small"

size="default"

size="large"

示例代码 ​

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

const state = reactive({
  buttons: [
    { text: 'default' },
    { text: 'info', type: 'info', leftSpacing: true },
    { text: 'primary', type: 'primary' },
    { text: 'warning', type: 'warning', leftSpacing: true },
    { text: 'success', type: 'success' },
    { text: 'danger', type: 'danger' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProButtonGroup :data="state.buttons" size="small" />
  <h4>size="default"</h4>
  <ProButtonGroup :data="state.buttons" size="default" />
  <h4>size="large"</h4>
  <ProButtonGroup :data="state.buttons" size="large" />
</template>

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

子按钮 ​

使用children属性配置子按钮列表：

children = [{ text: 'children1' }, { text: 'children2' }, ...]


示例代码 ​

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

const state = reactive({
  buttons: [
    {
      text: '子按钮1',
      children: [{ text: 'default1' }, { text: 'default2' }, { text: 'default3' }]
    },
    {
      text: '子按钮2',
      type: 'info',
      leftSpacing: true,
      children: [{ text: 'info1' }, { text: 'info2' }, { text: 'info3' }]
    },
    { text: 'primary', type: 'primary' },
    { text: 'warning', type: 'warning', leftSpacing: true },
    { text: 'success', type: 'success' },
    {
      text: '子按钮3',
      type: 'danger',
      children: [{ text: 'danger1' }, { text: 'danger2' }, { text: 'danger3' }]
    }
  ]
})
</script>

<template>
  <ProButtonGroup :data="state.buttons" />
</template>

显示&禁用 ​

display: true | false

disabled: true | false

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

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

示例代码 ​

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

const state = reactive({
  // 基础控制
  buttons1: [
    {
      text: '子按钮1',
      children: [
        { text: 'default1' },
        { text: 'default2(禁用)', disabled: true },
        { text: 'default3', display: false }
      ]
    },
    {
      text: '子按钮2(禁用)',
      type: 'info',
      disabled: true,
      leftSpacing: true,
      children: [{ text: 'info1' }, { text: 'info2' }, { text: 'info3' }]
    },
    { text: 'primary', type: 'primary' },
    { text: 'warning(禁用)', type: 'warning', disabled: true, leftSpacing: true },
    { text: 'success', type: 'success', display: false },
    {
      text: '子按钮3',
      type: 'danger',
      children: [
        { text: 'danger1', disabled: true },
        { text: 'danger2' },
        { text: 'danger3', disabled: true }
      ]
    }
  ],
  // 动态控制
  buttons2: [
    {
      text: '子按钮1',
      children: [
        { text: 'default1' },
        { text: 'default2(禁用)', disabled: (button) => true },
        { text: 'default3', display: (button) => button.text != 'default3' }
      ]
    },
    {
      text: '子按钮2(禁用)',
      type: 'info',
      disabled: (button) => true,
      leftSpacing: true,
      children: [{ text: 'info1' }, { text: 'info2' }, { text: 'info3' }]
    },
    { text: 'primary', type: 'primary' },
    { text: 'warning(禁用)', type: 'warning', leftSpacing: true, disabled: (button) => true },
    { text: 'success', type: 'success', display: (button) => false },
    {
      text: '子按钮3',
      type: 'danger',
      children: [
        { text: 'danger1(禁用)', disabled: (button) => true },
        { text: 'danger2' },
        {
          text: 'danger3',
          disabled: function (button) {
            return false
          }
        }
      ]
    }
  ]
})
</script>

<template>
  <H4>基础控制</H4>
  <p>display: true | false</p>
  <p>disabled: true | false</p>
  <ProButtonGroup :data="state.buttons1" />
  <H4>动态控制</H4>
  <p>display: function (button) { ... return true | false }</p>
  <p>disabled: function (button) { ... return true | false }</p>
  <ProButtonGroup :data="state.buttons2" />
</template>

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

事件 ​

ProButtonGroup API ​

属性说明类型默认值
size用于控制该按钮组内按钮的大小String: large、default、small-
type用于控制该按钮组内按钮的类型String: primary、success、warning、danger、info-
disabled按钮组整体禁用Booleanfalse
space按钮组间隔Number10
data按钮组按钮配置数据
详见【Button API】		Array[Object][]

Button API ​

属性说明类型默认值
key按钮唯一标识String-
text按钮文本String-
display按钮显示控制Boolean: true | false
Function: (data) => Boolean		true
disabled按钮禁用控制Boolean: true | false
Function: (data) => Boolean		false

Events ​

Slots ​