小林笔记

Appearance

Record - 实用组件和记录 ​

这个目录包含了各种实用的 Vue3 组件、自定义指令和开发记录。

📦 组件列表 ​

🆕 字符串输入组件 (StringInputComponent) ​

一个灵活的带单位分段输入组件，支持多种场景应用。

核心特性：

  • ✅ 灵活的单位配置
  • ✅ 双向绑定 (v-model)
  • ✅ 格式化输出
  • ✅ 必填和自定义校验
  • ✅ 多种输入类型支持
  • ✅ 响应式设计

快速开始：

  • 📖 完整文档 - 推荐阅读！包含快速入门、API 文档、可交互示例和完整源代码
  • 🎯 演示示例 - 5 个独立示例文件 + 完整演示

应用场景：

  • 💰 货币金额输入（元、角、分）
  • 📞 电话号码格式化
  • ⏰ 时间格式输入
  • 📦 自定义单位组合

快速示例：

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

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

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

动态表单 (Dynamic Form) ​

支持 JSON 配置的动态表单生成器。

🎨 自定义指令 ​

指令集合 ​

常用的 Vue3 自定义指令集合。

📝 开发记录 ​

CSS 相关 ​

开发笔记 ​

🗂️ 目录结构 ​

src/record/
├── README.md                           # 本文件
├── 字符串输入组件.md                   # 字符串输入组件完整文档
├── 动态表单.md                         # 动态表单文档
├── directive.md                        # 自定义指令文档
├── css.md                             # CSS开发记录
├── dev.md                             # 开发笔记
├── StringInputComponent.vue            # 字符串输入组件
├── types.ts                           # 类型定义
├── style.module.css                   # CSS Module样式
└── examples/                          # 示例文件
    ├── StringInputDemo.vue            # 字符串输入组件演示
    ├── StringInputTest.vue            # 字符串输入组件测试
    ├── StringInputInitTest.vue        # 字符串输入组件初始化测试
    ├── dynamicForm.vue                # 动态表单示例
    ├── DynamicFormExample.vue         # 动态表单演示
    └── ...                            # 其他示例

🚀 快速开始 ​

1. 安装依赖 ​

确保项目已安装必要的依赖：

bash
npm install

2. 引入组件 ​

vue
<script setup lang="ts">
// 引入字符串输入组件
import StringInputComponent from '@/record/StringInputComponent.vue'

// 引入类型定义（TypeScript）
import type { UnitInputConfig, ValidationRule } from '@/record/types'
</script>

3. 使用组件 ​

参考各个组件的文档和示例。

📚 推荐学习路径 ​

新手入门 ​

  1. 📖 阅读字符串输入组件文档快速上手
  2. 🎯 查看演示示例了解各种交互示例
  3. 📚 深入了解各种配置选项和高级用法

进阶使用 ​

  1. 🧪 查看示例代码了解各种场景
  2. 📝 阅读组件源码理解实现细节
  3. 🎨 自定义样式适配项目需求

🛠️ 技术栈 ​

  • Vue 3 - 使用 Composition API 和 <script setup> 语法
  • TypeScript - 完整的类型定义和检查
  • CSS - 现代化的样式和响应式设计

💡 开发规范 ​

组件开发 ​

  1. 使用 Vue 3 Composition API
  2. 遵循 TypeScript 最佳实践
  3. 编写清晰的代码注释
  4. 提供完整的类型定义
  5. 实现响应式设计

文档编写 ​

  1. 提供快速入门指南
  2. 编写详细的 API 文档
  3. 包含实际应用场景
  4. 提供可运行的示例代码

示例代码 ​

  1. 创建交互式 Demo
  2. 编写测试用例
  3. 覆盖常见场景
  4. 注释关键逻辑

🤝 贡献指南 ​

欢迎贡献新的组件、指令或改进现有代码！

添加新组件 ​

  1. 在 src/record/ 目录创建组件文件
  2. 在 src/record/types.ts 添加类型定义（如需要）
  3. 在 src/record/examples/ 创建示例文件
  4. 编写文档（快速入门 + 完整文档）
  5. 更新本 README 文件

📄 许可证 ​

MIT License

👨‍💻 维护者 ​

小林 - 专注于 Vue.js 生态系统和前端最佳实践

⭐ 如果这些组件对你有帮助，欢迎 Star！

有问题或建议？欢迎提 Issue 或 PR！