cell

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

复制成功

00:00

组件结构

组件封装结构如下

<div class="van-cell-dict">
  <van-cell ref="VanCellRef"></van-cell>
</div>

const VanCellRef = ref(null)
const getVanCellRef = () => {
  return VanCellRef.value
}

defineExpose({getVanCellRef})

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

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

点击阅读cell组件使用文档

属性

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

属性	类型	说明	默认值
modelValue	string, Number	绑定的值	无
dictType	string	字典类型	无
showTreePath	Boolean	是否展示树形层级结构	false
dictOptions	Object	showTreePath为false时 字典数据code转为label的配置项	无
dictTreeOptions	Object	showTreePath为true时 字典数据code转为label的配置项	无
maskType	[string,Array,Object]	脱敏类型 为字符串时可选值为[mobile，idCard, name, email, address， none]	无
maskStart	string，Number	自定义脱敏时展示前面几位数值	0
maskEnd	string，Number	自定义脱敏时展示后面几位数值	0
maskMiddle	string，Number	自定义脱敏时，中间展示几位 maskSymbol标识符	无
maskSymbol	string	脱敏替换标识符	*
dateFormat	string	日期格式化类型	无
defaultVal	string	modelValue没值时显示此值	""

dictOptions配置项

此地方的配置的作用为：例如上述示例中，多个值转化时，使用英文逗号分隔，如果你的数据不是英文逗号分隔，可配置dictOptions.spacer， 更多配置请继续阅读文档。

属性	类型	说明	默认值
defaultVal	[string,Number]	当某个字典值获取不到对应label时使用defaultVal显示	0
spacer	string	多个值且为字符串类型时的间隔符 默认值为英文逗号	","
formatFun(arr, format)	Function	根据arr和format进行格式化，自定义返回值	默认值如下

/**
 * arr: 根据字典值（可以是多个，字符串时 spacer分隔，数组也可以）和类型获取到的对应数据
 * format: 字典格式化参数 值为 dictConfig的format值
 */
formatFun(arr, format) {
  return arr
    .map((item) => {
      return item[format.label]
    })
    .join(",")
}

dictTreeOptions配置项

此地方的配置的作用为：例如上述示例中，多个值转化时，使用英文逗号分隔，如果你的数据不是英文逗号分隔，可配置dictTreeOptions.spacer， 更多配置请继续阅读文档。

属性	类型	说明	默认值
defaultVal	[string,Number]	当某个字典值获取不到对应label时使用defaultVal显示	无
spacer	string	多个值且为字符串类型时的间隔符 默认值为英文逗号	","
formatFunIn(arr, treeSetting)	Function	根据arr和treeSetting进行格式化，自定义树形数据的返回	默认值如下
formatFunOut(arr)	Function	根据arr进行格式化，自定义多个树形数据的返回	默认值如下
treeSetting	Object	树形数组相关配置	默认值为dictConfig最终获取到treeSetting配置

/**
 * arr: 这个arr为根据字典值获取到的 层级关系对象数组 
 * treeSetting: 字典格式化参数 值为 dictConfig的treeSetting值
 */
formatFunIn(arr, treeSetting) {
  return arr.map((item) => {
    return item[treeSetting.labelField]
  }).join("/")
}

/**
 * arr: 这个arr为多个上述formatFunIn返回值的数组
 */
formatFunOut(arr) {
  return arr.join(",")
}

maskType为Array时可接收的属性

属性	类型	说明	默认值
maskType[0]	[string,Number]	对应maskStart属性配置 优先级比maskStart配置低	0
maskType[1]	[string,Number]	对应maskMiddle属性配置 优先级比maskMiddle配置低	0
maskType[2]	[string,Number]	对应maskEnd属性配置 优先级比maskEnd配置低	0
maskType[3]	string	对应maskSymbol属性配置 优先级比maskSymbol配置低	*

maskType为Object时可接收的属性

属性	类型	说明	默认值
start	[string,Number]	对应maskStart属性配置 优先级比maskStart配置低	0
middle	[string,Number]	对应maskMiddle属性配置 优先级比maskMiddle配置低	0
end	[string,Number]	对应maskEnd属性配置 优先级比maskEnd配置低	0
symbol	string	对应maskSymbol属性配置 优先级比maskSymbol配置低	*

注意

maskType 配置为字符串时 优先级 > 自定义脱敏

字符串长度 < (maskStart + maskEnd + maskMiddle) 不脱敏