buttons v1.1.0

一个基于字典数据或自定义配置渲染按钮组的组件，支持动态获取字典数据、自定义按钮属性、灵活配置禁用规则及布局，适用于表单操作、状态切换等场景。

默认情况下使用dict-buttons使用, 如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-buttons使用。

复制成功

00:00

代码结构

<div class="van-buttons-dict">
  <van-button :ref="(el) => { if (el) VanButtonRefs[index] = el }"></van-button>
</div>

const VanButtonRefs = ref([])

const getVanButtonRefs = () => {
  return VanButtonRefs.value
}
defineExpose({ getVanButtonRefs })

基本用法

1. 基于字典数据渲染

通过 dictType 指定字典类型，自动从字典中获取数据并渲染按钮组

<template>
  <DictButtons 
    dictType="status" 
    col="2" 
    gap="10" 
    @submit="handleSubmit"
  />
</template>

<script setup>
const handleSubmit = (item) => {
  console.log("点击了按钮：", item);
};
</script>

2. 自定义按钮列表

通过 buttonList 直接传入自定义按钮配置

<template>
  <DictButtons 
    :buttonList="customButtons" 
    col="3" 
    @submit="handleSubmit"
  />
</template>

<script setup>
const customButtons = [
  { text: "新增", type: "primary", actionType: "submit" },
  { text: "编辑", type: "info", actionType: "submit" },
  { text: "删除", type: "danger", actionType: "submit", disabled: true }
];

const handleSubmit = (item) => {
  console.log("点击了按钮：", item);
};
</script>

Props 说明

参数名	类型	默认值	说明
dictType	String/Object	-	字典配置，用于从字典获取按钮数据 - 字符串：直接指定字典类型 - 对象：带过滤配置的字典（见下方说明）
disabledObj	Object	-	按钮禁用规则配置（见下方说明）
filterDataFun	Function	-	数据过滤函数，入参为原始字典数据，返回过滤后的数组
disabledDataFun	Function	-	禁用判断函数（优先级高于 disabledObj），入参为单个按钮对象，返回布尔值
buttonList	Array	[]	自定义按钮列表，数组每项为按钮配置（见下方按钮配置说明）
defaultValv1.1.0	string	有配置dictType时且modelValue匹配不到对应字典值，默认为null	null
emptyTextv1.1.0	string	有配置dictType时modelValue没值时的替换显示值，默认为--	--
col	String/Number	1	每行显示的按钮数量，用于计算按钮宽度
gap	Number/String/Array	"12"	按钮间距 - 数字/字符串：行列间距相同（如 "12" 表示 12px） - 数组：[行间距, 列间距]（如 [10, 8]）

String(item.text || (dictItem ? dictItem[dictConfig.format.label] : ((item.defaultVal || defaultVal.value) ?? (item.modelValue === 0 ? 0 : (item.modelValue || item.emptyText || emptyText.value)))))

注意

配置defaultVal后，当匹配不到对应字典时一定显示 defaultVal。 未配置defaultVal且匹配不到对应字典时，modelValue有值显示modelValue值 没值显示 emptyText

buttonList数组对象里面的配置项优先级大于组件配置的优先级

item.text > item.defaultVal > defaultVal.value > item.modelValue > item.emptyText > emptyText.value

dictType 对象配置

当 dictType 为对象时，支持以下属性：

属性名	类型	默认值	说明
type	String	-	字典类型（必传）
filters	String/Array	-	过滤值，字符串用逗号分隔（如 "1,2"），数组直接传值
filterType	String	取自 store 中的 dictConfig.format.value	过滤依据的字段（如根据 value 字段过滤）
reverse	Boolean	false	是否反向过滤（true：排除 filters 中的值，false：只保留 filters 中的值）

disabledObj 配置

属性名	类型	默认值	说明
disabledValues	String/Array	-	禁用值，字符串用逗号分隔（如 "1,2"），数组直接传值
disabledType	String	取自 store 中的 dictConfig.format.value	禁用判断依据的字段（如根据 value 字段判断）
reverse	Boolean	false	是否反向禁用（true：排除 disabledValues 中的值禁用，false：包含则禁用）

按钮配置项（buttonList 每项属性）

属性名	类型	说明
text	String	按钮文本（对应字典中的 label 字段）
type	String	按钮类型（如 primary、info、danger，对应字典中的 type 字段）
color	String	按钮颜色（对应字典中的 color 字段）
icon	String	按钮图标（对应字典中的 icon 字段）
disabled	Boolean	是否禁用（对应字典中的 disabled 字段）
actionType	String	点击触发的事件类型（submit/reset/action，默认 submit）
slotList	Array	按钮插槽配置（见下方插槽说明）
...	-	其他 van-button 支持的属性（如 size、round 等）

事件说明

事件名	说明	回调参数
submit	点击 actionType 为 submit 的按钮时触发	item：当前点击的按钮对象
reset	点击 actionType 为 reset 的按钮时触发	item：当前点击的按钮对象
action	点击 actionType 为 action 的按钮时触发	item：当前点击的按钮对象

方法说明

组件通过 defineExpose 暴露以下方法：

方法名	说明	返回值
getVanButtonRefs	获取所有 van-button 实例	包含 van-button 实例的数组

插槽说明

通过按钮配置中的 slotList 可自定义按钮内容，slotList 每项配置：

属性名	类型	说明
slotName	String	插槽名称（如 default、icon）
render	Function,String	渲染函数，入参为插槽作用域,字符串类型时支持vue语法的html结构

示例：

const customButtons1 = [
  {
    text: "默认文本",
    slotList: [
      {
        slotName: "default",
        render: (scope) => <span>自定义文本</span>
      }
    ]
  }
];

const customButtons2 = [
  {
    text: "默认文本",
    slotList: [
      {
        slotName: "default",
        render: "<span>{{A}}</span>" //插槽scope变量有的值都可以使用 此处A渲染为  scope.A 遇到引号时  \" 转义下
      }
    ]
  }
];

透传属性

组件支持通过 button- 前缀透传属性给内部的 van-button 组件，例如：

<DictButtons 
  dictType="status" 
  button-size="small" 
  button-round 
  button-plain
/>

上述代码中，button-size、button-round、button-plain 会被转换为 van-button 的 size、round、plain 属性。

示例场景

1. 带过滤的字典按钮

<DictButtons 
  :dictType="{
    type: 'status',
    filters: ['1', '2'], // 只保留 value 为 1 和 2 的按钮
    filterType: 'value'
  }" 
  col="2"
/>

2. 自定义禁用规则

<DictButtons 
  dictType="operation"
  :disabledDataFun="(item) => item.value === 'delete'" // 禁用 value 为 delete 的按钮
/>

3. 自定义布局间距

<DictButtons 
  buttonList="[{text: '按钮1'}, {text: '按钮2'}, {text: '按钮3'}]"
  col="3"
  gap="[10, 8]" // 行间距 10px，列间距 8px
/>