字符串输入组件

📝 组件概述

StringInputComponent 是一个灵活的字符串输入组件，支持按单位分段输入，并组合成特定格式的字符串。

输出格式：RMB100YUAN50JIAO5FEN8（单位+值）

核心特性

✅ 灵活的单位配置（字符串数组或配置对象）
✅ 完整的 v-model 双向绑定
✅ 简洁的输出格式
✅ 空单位支持（第一个可为空）
✅ 必填和自定义校验
✅ 多种输入类型（text、number、tel 等）
✅ 响应式设计

⚠️ 使用限制

不支持连续的多个空单位：组件不适用于连续出现多个空单位（空字符串）的场景，如 ['', '', 'unit'] 会导致解析异常
建议使用场景：每个单位之间最好有明确的单位标识，或者只在第一个位置使用空单位

🚀 快速开始

基础使用

vue

<template>
  <StringInputComponent v-model="money" :units="['RMB', 'YUAN', 'JIAO', 'FEN']" />
  <p>输出: {{ money }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import StringInputComponent from '@/record/StringInputComponent.vue'

const money = ref('RMB100YUAN50JIAO5FEN8')
</script>

输出：RMB100YUAN50JIAO5FEN8

空单位支持

vue

<template>
  <StringInputComponent v-model="value" :units="['', 'YUAN', 'JIAO']" />
</template>

<script setup lang="ts">
const value = ref('123YUAN50JIAO5')
</script>

输出：123YUAN50JIAO5（第一个无单位标签）

📖 完整示例

示例 1：基础货币输入

带类型限制的货币输入，支持数字类型和占位符。

example

示例 1：基础货币输入

带类型限制的货币输入，支持数字类型和占位符

RMB

YUAN

JIAO

FEN

输出值：RMB100YUAN50JIAO5FEN8

查看代码

vue

<template>
  <StringInputComponent
    v-model="money"
    :units="['RMB', 'YUAN', 'JIAO', 'FEN']"
    :default-input-config="{
      type: 'number',
      placeholder: '0'
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const money = ref('RMB100YUAN50JIAO5FEN8')
</script>

示例 2：必填校验

支持必填字段验证，点击校验按钮触发表单验证。

example

示例 2：必填校验

支持必填字段验证，点击校验按钮触发表单验证

RMB

YUAN

JIAO

输出值：RMB11YUAN123

vue

<template>
    <div class="example-container">
        <h3>示例 2：必填校验</h3>
        <p class="description">支持必填字段验证，点击校验按钮触发表单验证</p>

        <StringInputComponent ref="formRef" v-model="money" :units="unitConfigs" />

        <div class="button-group">
            <button @click="handleValidate" class="btn-primary">校验</button>
            <button @click="handleReset" class="btn-secondary">重置</button>
        </div>

        <div v-if="validationResult" :class="['validation-result', validationResult.type]">
            {{ validationResult.message }}
        </div>

        <div class="output">
            <strong>输出值：</strong>
            <code>{{ money || '(空)' }}</code>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import StringInputComponent from '../StringInputComponent.vue'
import type { UnitInputConfig } from '../types'

const formRef = ref()
const money = ref('RMB11YUAN123')
const validationResult = ref<{ type: string; message: string } | null>(null)

const unitConfigs: UnitInputConfig[] = [
    {
        unit: 'RMB',
        inputConfig: {
            type: 'number',
            required: true,
            placeholder: '必填'
        }
    },
    {
        unit: 'YUAN',
        inputConfig: {
            type: 'number',
            required: true,
            placeholder: '必填'
        }
    },
    {
        unit: 'JIAO',
        inputConfig: {
            type: 'number',
            placeholder: '可选'
        }
    }
]

const handleValidate = () => {
    if (formRef.value) {
        const isValid = formRef.value.validate()
        validationResult.value = {
            type: isValid ? 'success' : 'error',
            message: isValid ? '✓ 校验通过' : '✗ 校验失败，请检查必填项'
        }
    }
}

const handleReset = () => {
    if (formRef.value) {
        formRef.value.reset()
        validationResult.value = null
    }
}
</script>

<style scoped>
.example-container {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fff;
}

h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.description {
    margin-bottom: 20px;
    font-size: 14px;
    color: #6b7280;
}

.button-group {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

button {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    color: #fff;
    background-color: #3b82f6;
}

.btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

.btn-secondary {
    color: #374151;
    background-color: #f3f4f6;
}

.btn-secondary:hover {
    background-color: #e5e7eb;
}

.validation-result {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.validation-result.success {
    color: #059669;
    background-color: #d1fae5;
    border: 1px solid #a7f3d0;
}

.validation-result.error {
    color: #dc2626;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
}

.output {
    margin-top: 20px;
    padding: 12px;
    background-color: #f9fafb;
    border-radius: 6px;
    font-size: 14px;
}

.output code {
    padding: 4px 8px;
    background-color: #1f2937;
    color: #10b981;
    font-family: 'Monaco', 'Menlo', monospace;
    border-radius: 4px;
    margin-left: 8px;
}
</style>

查看代码

vue

<template>
  <StringInputComponent ref="formRef" v-model="money" :units="unitConfigs" />
  <button @click="handleSubmit">校验</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { UnitInputConfig } from '@/record/types'

const formRef = ref()
const money = ref('')

const unitConfigs: UnitInputConfig[] = [
  {
    unit: 'RMB',
    inputConfig: {
      type: 'number',
      required: true,
      placeholder: '必填'
    }
  },
  {
    unit: 'YUAN',
    inputConfig: {
      type: 'number',
      required: true,
      placeholder: '必填'
    }
  },
  {
    unit: 'JIAO',
    inputConfig: {
      type: 'number',
      placeholder: '可选'
    }
  }
]

const handleSubmit = () => {
  if (formRef.value?.validate()) {
    console.log('校验通过！', money.value)
  }
}
</script>

示例 3：自定义校验规则

支持自定义校验规则，实时校验用户输入。

example

示例 3：自定义校验规则

支持自定义校验规则，实时校验用户输入

规则：RMB必须是数字且不能为负，YUAN必须小于100

RMB

YUAN

输出值：(空)

vue

<template>
    <div class="example-container">
        <h3>示例 3：自定义校验规则</h3>
        <p class="description">支持自定义校验规则，实时校验用户输入</p>
        <p class="hint">规则：RMB必须是数字且不能为负，YUAN必须小于100</p>

        <StringInputComponent v-model="money" :units="['RMB', 'YUAN']" :rules="customRules" :validate-on-input="true" />

        <div class="output">
            <strong>输出值：</strong>
            <code>{{ money || '(空)' }}</code>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import StringInputComponent from '../StringInputComponent.vue'
import type { ValidationRule } from '../types'

const money = ref('')

const customRules: Record<string, ValidationRule[]> = {
    RMB: [
        {
            validator: (value: string) => {
                if (!value) return true
                const num = parseInt(value)
                if (isNaN(num)) return 'RMB必须是数字'
                if (num < 0) return 'RMB不能为负数'
                return true
            }
        }
    ],
    YUAN: [
        {
            validator: (value: string) => {
                if (!value) return true
                const num = parseInt(value)
                if (isNaN(num)) return 'YUAN必须是数字'
                if (num >= 100) return 'YUAN必须小于100'
                return true
            }
        }
    ]
}
</script>

<style scoped>
.example-container {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fff;
}

h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.description {
    margin-bottom: 12px;
    font-size: 14px;
    color: #6b7280;
}

.hint {
    margin-bottom: 20px;
    padding: 12px;
    background-color: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 13px;
    color: #92400e;
}

.output {
    margin-top: 20px;
    padding: 12px;
    background-color: #f9fafb;
    border-radius: 6px;
    font-size: 14px;
}

.output code {
    padding: 4px 8px;
    background-color: #1f2937;
    color: #10b981;
    font-family: 'Monaco', 'Menlo', monospace;
    border-radius: 4px;
    margin-left: 8px;
}
</style>

查看代码

vue

<template>
  <StringInputComponent v-model="money" :units="['RMB', 'YUAN']" :rules="customRules" :validate-on-input="true" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ValidationRule } from '@/record/types'

const money = ref('')

const customRules: Record<string, ValidationRule[]> = {
  RMB: [
    {
      validator: (value: string) => {
        if (!value) return true
        const num = parseInt(value)
        if (isNaN(num)) return 'RMB必须是数字'
        if (num < 0) return 'RMB不能为负数'
        return true
      }
    }
  ],
  YUAN: [
    {
      validator: (value: string) => {
        if (!value) return true
        const num = parseInt(value)
        if (isNaN(num)) return 'YUAN必须是数字'
        if (num >= 100) return 'YUAN必须小于100'
        return true
      }
    }
  ]
}
</script>

示例 4：时间格式输入

支持时分秒格式，最后一个单位可以设置为禁用。

example

示例 4：时间格式输入

支持时分秒格式，最后一个单位可以设置为禁用

时

分

秒

输出值：14时30分45秒

查看代码

vue

<template>
  <StringInputComponent v-model="time" :units="timeUnits" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const time = ref('14时30分45秒')

const timeUnits = [
  { unit: '', inputConfig: { type: 'number', placeholder: '时', maxlength: 2 } },
  { unit: '时', inputConfig: { type: 'number', placeholder: '分', maxlength: 2 } },
  { unit: '分', inputConfig: { type: 'number', placeholder: '秒', maxlength: 2 } },
  { unit: '秒', inputConfig: { disabled: true } }
]
</script>

完整演示（7 个场景）

查看包含所有功能的完整演示。

example