IM/docs/vue3组件文档.md

📚 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 绑定的数据。