1 vue3组件文档

西街长安 edited this page 2026-01-30 21:37:51 +08:00

Unescape Escape

Table of Contents

• 📚 MyButton
• 🏷️ 1. 组件概览
• 基础信息
• 引入方式
• 💡 2. 使用示例
• 基础用法（Primary Variant）
• 状态和事件绑定
• ⚙️ 3. Props 属性说明 (API)
• 🧩 4. 插槽说明 (Slots)
• ⚡ 5. 事件说明 (Events)
• 📚 IconInput
• 🏷️ 1. 组件概览
• 基础信息
• 引入方式
• 💡 2. 使用示例
• 基础用法（双向绑定）
• ⚙️ 3. Props 属性说明 (API)
• ⚡ 4. 事件说明 (Events)

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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