button

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

复制成功

00:00

组件结构

组件封装结构如下

<van-button ref="VanButtonRef"></van-button>

const VanButtonRef = ref(null)
const getVanButtonRef = () => {
  return VanButtonRef.value
}

defineExpose({getVanButtonRef})

属性、事件和插槽继承技巧

此组件仅引用了van-button一个组件，可直接继承原生属性、事件和插槽

点击阅读button组件使用文档

属性

继承van-button组件的所有属性以及新增的下列几个属性

属性	类型	说明	默认值
modelValue	string，number	按钮绑定的字典值，必传 v1.1.0开始 dictType没值时modelValue就是button的text值	“”
dictType	string	按钮的字典类型，v1.1.0开始改为非必传	“”
defaultValv1.1.0	string	有配置dictType时且modelValue匹配不到对应字典值，默认为null	null
emptyTextv1.1.0	string	有配置dictType时modelValue没值时的替换显示值，默认为--	--
judgeTypeFun(modelValue)	function	根据modelValue返回对应的type函数	无
judgeColorFun(modelValue)	function	根据modelValue返回对应的color函数	无
judgeDisabledFun(modelValue)	function	根据modelValue返回对应的disabled函数	无
actionTypev1.1.0	string	点击时触发的事件类型可选值为 submit或reset或action，用于动态组件触发提交或者重置或自定义的功能	submit

defaultVal和emptyText的详细规则如下

String(defaultVal ?? (modelValue === 0 ? 0 : (modelValue || emptyText)))

注意

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

type优先级：judgeTypeFun > type > 字典值对应数据自带的的type属性

color优先级：judgeColorFun>color>字典值对应数据自带的color属性

disabled优先级：judgeDisabledFun>字典值对应数据自带的disabled属性(为false时忽略)>disabled

插槽

继承van-button组件的所有插槽