field

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

复制成功

00:00

组件结构

组件封装结构如下

<div class="van-field-dict van-cell-dict">
  <van-field ref="VanFieldRef"></van-field>
  <van-field ref="VanFieldRefMask"></van-field>
</div>

const VanFieldRef = ref(null)
const getVanFieldRef = () => {
  return VanFieldRef.value
}

const VanFieldRefMask = ref(null)
const getVanFieldRefMask = () => {
  return VanFieldRefMask.value
}

defineExpose({getVanFieldRef, getVanFieldRefMask})

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

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

点击阅读field组件使用文档

属性

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

属性	类型	说明	默认值
maskType	[string,Array,Object]	脱敏类型 为字符串时可选值为[mobile，idCard, name, email, address， none]	无
maskStart	string，Number	自定义脱敏时展示前面几位数值	0
maskEnd	string，Number	自定义脱敏时展示后面几位数值	0
maskMiddle	string，Number	自定义脱敏时，中间展示几位 maskSymbol标识符	无
maskSymbol	string	脱敏替换标识符	*
isMask	Boolean	是否脱敏，默认为true，readonly时是否需要脱敏可修改此字段即可	true

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) 不脱敏

TIP

此组件实现了聚焦的时候不脱敏，失去焦点的时候脱敏的功能，当配置了readonly时，无法聚焦导致无法查看到真实值，此时可以配置 isMask属性为false来查看真实值。