字符串输入组件 - 演示示例

本目录包含字符串输入组件的完整演示和测试文件。

📁 文件列表

单独示例文件

每个示例都是独立的 Vue 文件，方便单独查看和使用：

StringInputExample1.vue

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

StringInputExample2.vue

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

StringInputExample3.vue

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

StringInputExample4.vue

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

---

完整演示文件

StringInputDemo.vue

完整的交互式演示，包含 7 个实用场景：

1. 简单使用 - 货币单位基础示例
2. 空单位支持 - 第一个输入框无单位标签
3. 配置输入框属性 - 自定义 type、placeholder、maxlength
4. 必填校验 - 实现表单必填验证
5. 自定义校验规则 - 复杂的业务校验逻辑
6. 禁用状态 - 部分输入框禁用
7. 时间格式 - 时分秒格式化输入

---

测试文件

StringInputTest.vue

基础功能测试用例

StringInputInitTest.vue

初始化和值回显测试

🚀 如何运行

在项目中使用

直接在你的 Vue 页面中引入组件：

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

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

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

查看完整代码

打开 StringInputDemo.vue 文件查看所有示例的完整实现代码。

📖 更多信息

返回 组件文档 查看完整的 API 文档和使用指南。