code/IM
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Revert "提交"

Browse Source 
This reverts commit b96d895809.
This commit is contained in:
nanxun
2026-02-12 21:59:08 +08:00
parent b96d895809
commit d429560511
339 changed files with 46657 additions and 46655 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/vue3组件文档.md
+149 -149
View File
@@ -1,150 +1,150 @@
# 📚 MyButton
## 🏷️ 1. 组件概览
### 基础信息
| **属性** | **值** |
| ------------ | ---------------------------------------------------------- |
| **组件名称** | `MyButton` |
| **文件路径** | `@/components/MyButton.vue` |
| **用途** | 封装项目中的所有交互按钮，提供统一的样式、交互状态和动画。 |
| **版本** | v1.0.0 |
| **核心依赖** | `feather-icons` (需要父组件或全局初始化) |
### 引入方式
JavaScript
```
import MyButton from '@/components/MyButton.vue';
```
## 💡 2. 使用示例
### 基础用法（Primary Variant）
HTML
```
<MyButton>保存配置</MyButton>
<MyButton variant="primary">
<i data-feather="send"></i>
发送邮件
</MyButton>
```
### 状态和事件绑定
HTML
```
<MyButton variant="secondary" :disabled="isSaving">
取消
</MyButton>
<MyButton variant="danger" :loading="isDeleting" @click="handleDelete">
删除数据
</MyButton>
```
## ⚙️ 3. Props 属性说明 (API)
| **名称 (Prop Name)** | **类型 (Type)** | **可选值/说明** | **默认值 (Default)** | **描述** |
| -------------------- | --------------- | ------------------------------------------------------------ | -------------------- | -------------------------------------------------------- |
| `variant` | `String` | `primary` (主色调), `secondary` (次要/灰色), `danger` (危险/红色), `text` (纯文本链接样式) | `'primary'` | 定义按钮的外观和主题颜色。 |
| `disabled` | `Boolean` | — | `false` | 明确禁用按钮，移除点击交互和视觉提示。 |
| `loading` | `Boolean` | — | `false` | 设置为 `true` 时，按钮显示加载状态，并自动应用禁用样式。 |
## 🧩 4. 插槽说明 (Slots)
| **名称 (Slot Name)** | **用途** | **插槽 Prop** | **示例用法** |
| -------------------- | ------------------------------------------ | ------------- | --------------------------------- |
| **默认** (`default`) | 用于插入按钮的**文本内容**或其他核心元素。 | 无 | `<MyButton> 按钮文本 </MyButton>` |
## ⚡ 5. 事件说明 (Events)
| **名称 (Event Name)** | **参数 (Payload)** | **描述** |
| --------------------- | --------------------- | ------------------------------------------------------------ |
| `@click` | `(event: MouseEvent)` | 按钮被点击时触发。由于使用了 `v-bind="attrs"`，此事件是透传自内部 `<button>`。 |
# 📚 IconInput
## 🏷️ 1. 组件概览
### 基础信息
| **属性** | **值** |
| ------------ | ------------------------------------------------------------ |
| **组件名称** | `IconInput` |
| **文件路径** | `@/components/IconInput.vue` |
| **用途** | 封装带图标的输入框，支持 `v-model` 双向绑定，并提供聚焦时图标颜色变化等高级交互。 |
| **版本** | v1.0.0 |
| **核心依赖** | `feather-icons` (需要在项目中安装) |
| **特性** | 支持 `v-model`，自动集成 Feather Icons。 |
### 引入方式
JavaScript
```
import IconInput from '@/components/IconInput.vue';
```
## 💡 2. 使用示例
### 基础用法（双向绑定）
HTML
```
<template>
<div>
<IconInput
v-model="username"
lab="用户名"
icon-name="user"
placeholder="请输入用户名"
type="text"
/>
<IconInput
v-model="password"
lab="密码"
icon-name="lock"
placeholder="请输入密码"
type="password"
/>
<p>当前用户名: {{ username }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const username = ref('');
const password = ref('');
</script>
```
## ⚙️ 3. Props 属性说明 (API)
| **名称 (Prop Name)** | **类型 (Type)** | **可选值/说明** | **默认值 (Default)** | **描述** |
| -------------------- | --------------- | ------------------------------------------------------------ | -------------------- | -------------------------------------------- |
| `v-model` 绑定 | 见 `modelValue` | — | — | **使用标准 `v-model` 语法实现双向绑定。** |
| `modelValue` | `String` | — | `''` | (内部 Prop) `v-model` 绑定传入的值。 |
| `lab` | `String` | — | `'输入框'` | 输入框上方的标签（Label）文本。 |
| `placeholder` | `String` | — | `''` | 输入框的占位符文本。 |
| `type` | `String` | `text`, `password`, `email` 等原生类型 | `'text'` | 设置输入框的 `type` 属性。 |
| `iconName` | `String` | 任何有效的 [Feather Icon] 名称（例如 `'mail'`, `'user'`, `'lock'`）。 | **无** | **必填项**，用于指定显示在输入框左侧的图标。 |
## ⚡ 4. 事件说明 (Events)
| **名称 (Event Name)** | **参数 (Payload)** | **描述** |
| --------------------- | -------------------- | ------------------------------------------------------------ |
| `@update:modelValue` | `(newValue: string)` | **(核心事件)** 当输入框的值变化时，触发此事件来更新父组件通过 `v-model` 绑定的数据。 |
# 📚 MyButton
## 🏷️ 1. 组件概览
### 基础信息
| **属性** | **值** |
| ------------ | ---------------------------------------------------------- |
| **组件名称** | `MyButton` |
| **文件路径** | `@/components/MyButton.vue` |
| **用途** | 封装项目中的所有交互按钮，提供统一的样式、交互状态和动画。 |
| **版本** | v1.0.0 |
| **核心依赖** | `feather-icons` (需要父组件或全局初始化) |
### 引入方式
JavaScript
```
import MyButton from '@/components/MyButton.vue';
```
## 💡 2. 使用示例
### 基础用法（Primary Variant）
HTML
```
<MyButton>保存配置</MyButton>
<MyButton variant="primary">
<i data-feather="send"></i>
发送邮件
</MyButton>
```
### 状态和事件绑定
HTML
```
<MyButton variant="secondary" :disabled="isSaving">
取消
</MyButton>
<MyButton variant="danger" :loading="isDeleting" @click="handleDelete">
删除数据
</MyButton>
```
## ⚙️ 3. Props 属性说明 (API)
| **名称 (Prop Name)** | **类型 (Type)** | **可选值/说明** | **默认值 (Default)** | **描述** |
| -------------------- | --------------- | ------------------------------------------------------------ | -------------------- | -------------------------------------------------------- |
| `variant` | `String` | `primary` (主色调), `secondary` (次要/灰色), `danger` (危险/红色), `text` (纯文本链接样式) | `'primary'` | 定义按钮的外观和主题颜色。 |
| `disabled` | `Boolean` | — | `false` | 明确禁用按钮，移除点击交互和视觉提示。 |
| `loading` | `Boolean` | — | `false` | 设置为 `true` 时，按钮显示加载状态，并自动应用禁用样式。 |
## 🧩 4. 插槽说明 (Slots)
| **名称 (Slot Name)** | **用途** | **插槽 Prop** | **示例用法** |
| -------------------- | ------------------------------------------ | ------------- | --------------------------------- |
| **默认** (`default`) | 用于插入按钮的**文本内容**或其他核心元素。 | 无 | `<MyButton> 按钮文本 </MyButton>` |
## ⚡ 5. 事件说明 (Events)
| **名称 (Event Name)** | **参数 (Payload)** | **描述** |
| --------------------- | --------------------- | ------------------------------------------------------------ |
| `@click` | `(event: MouseEvent)` | 按钮被点击时触发。由于使用了 `v-bind="attrs"`，此事件是透传自内部 `<button>`。 |
# 📚 IconInput
## 🏷️ 1. 组件概览
### 基础信息
| **属性** | **值** |
| ------------ | ------------------------------------------------------------ |
| **组件名称** | `IconInput` |
| **文件路径** | `@/components/IconInput.vue` |
| **用途** | 封装带图标的输入框，支持 `v-model` 双向绑定，并提供聚焦时图标颜色变化等高级交互。 |
| **版本** | v1.0.0 |
| **核心依赖** | `feather-icons` (需要在项目中安装) |
| **特性** | 支持 `v-model`，自动集成 Feather Icons。 |
### 引入方式
JavaScript
```
import IconInput from '@/components/IconInput.vue';
```
## 💡 2. 使用示例
### 基础用法（双向绑定）
HTML
```
<template>
<div>
<IconInput
v-model="username"
lab="用户名"
icon-name="user"
placeholder="请输入用户名"
type="text"
/>
<IconInput
v-model="password"
lab="密码"
icon-name="lock"
placeholder="请输入密码"
type="password"
/>
<p>当前用户名: {{ username }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const username = ref('');
const password = ref('');
</script>
```
## ⚙️ 3. Props 属性说明 (API)
| **名称 (Prop Name)** | **类型 (Type)** | **可选值/说明** | **默认值 (Default)** | **描述** |
| -------------------- | --------------- | ------------------------------------------------------------ | -------------------- | -------------------------------------------- |
| `v-model` 绑定 | 见 `modelValue` | — | — | **使用标准 `v-model` 语法实现双向绑定。** |
| `modelValue` | `String` | — | `''` | (内部 Prop) `v-model` 绑定传入的值。 |
| `lab` | `String` | — | `'输入框'` | 输入框上方的标签（Label）文本。 |
| `placeholder` | `String` | — | `''` | 输入框的占位符文本。 |
| `type` | `String` | `text`, `password`, `email` 等原生类型 | `'text'` | 设置输入框的 `type` 属性。 |
| `iconName` | `String` | 任何有效的 [Feather Icon] 名称（例如 `'mail'`, `'user'`, `'lock'`）。 | **无** | **必填项**，用于指定显示在输入框左侧的图标。 |
## ⚡ 4. 事件说明 (Events)
| **名称 (Event Name)** | **参数 (Payload)** | **描述** |
| --------------------- | -------------------- | ------------------------------------------------------------ |
| `@update:modelValue` | `(newValue: string)` | **(核心事件)** 当输入框的值变化时，触发此事件来更新父组件通过 `v-model` 绑定的数据。 |
##