xtf-password-input

组件说明

xtf-password-input 是验证码和支付密码输入组件，适用于固定长度敏感输入。支持掩码、错误状态、外部聚焦控制和完成回调。

---

基础用法

1. 六位密码

<template>
  <xtf-password-input v-model="password" @focus="focused" @blur="blurred" @complete="complete" />
</template>
<script>
export default {
  data() {
    return { password: '' }
  },
  methods: {
    focused() {
      console.log('开始输入')
    },
    blurred() {
      console.log('结束输入')
    },
    complete(value) {
      uni.showToast({ title: '输入完成', icon: 'none' })
      console.log(value)
    }
  }
}
</script>

2. 明文验证码与错误

<template>
  <xtf-password-input
    v-model="code"
    :length="4"
    :mask="false"
    variant="filled"
    error-info="验证码无效"
  />
</template>
<script>
export default {
  data() {
    return { code: '12' }
  }
}
</script>

3. 实例聚焦

<template>
  <view>
    <xtf-password-input ref="password" v-model="value" size="lg" /><xtf-button
      label="重新输入"
      @click="focus"
  /></view>
</template>
<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    focus() {
      this.value = ''
      this.$refs.password.focus()
      console.log('已聚焦')
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | value/modelValue | String | ''/undefined | 输入值，后者优先 | v-model | | length | Number \| String | 6 | 格子数量与最大输入长度 | 验证码位数 | | mask | Boolean | true | 显示圆点而非字符 | 密码输入 | | gutter | Number \| String | '' | 格子间距，空值随尺寸 | 布局调整 | | focused | Boolean | false | 外部控制焦点 | 自动聚焦 | | errorInfo | String | '' | 错误文本并变更格子颜色 | 校验失败 | | disabled/readonly | Boolean | false/false | 禁用/只读 | 状态展示 | | size | String | 'md' | sm/md/lg | 尺寸变体 | | variant | String | 'outline' | outline/filled/minimal/contrast | 视觉变体 | | customClass | String | '' | 根节点类名 | 样式覆盖 | | customStyle | String \| Object | '' | 根节点样式 | 动态样式 |

事件

事件名称	触发时机	回调参数	参数说明
update:value/update:modelValue/input	原生输入时	(value: String)	截断至 length 的新值
focus/blur	输入框获得/失去焦点	()	焦点状态通知
complete	受控值达到长度	(value: String)	完整密码或验证码

---

插槽

插槽名	作用	作用域参数	说明
无	-	-	组件未提供插槽

---

方法

1. focus() - 手动显示焦点

无参数，返回 void。通过 this.$refs.password.focus() 调用。

2. blur() - 手动取消焦点

无参数，返回 void。通过 this.$refs.password.blur() 调用。

主题说明

• 格子使用 var(--xtf-pwd-cell-size)、var(--xtf-pwd-cell-gap) 和 var(--xtf-pwd-cell-count)。
• 常规色来自 var(--xtf-color-border)、var(--xtf-color-primary)、var(--xtf-color-danger)。
• outline 是描边，filled 为填充，minimal 为下划线，contrast 为深色高对比。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。