add(MyButton): 新增按钮组件
This commit is contained in:
parent
fe4a9173a4
commit
6ca7a8275c
150
docs/vue3组件文档.md
Normal file
150
docs/vue3组件文档.md
Normal file
@ -0,0 +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` 绑定的数据。 |
|
||||||
|
|
||||||
|
##
|
||||||
130
frontend/web/src/components/MyButton.vue
Normal file
130
frontend/web/src/components/MyButton.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<div id="btn">
|
||||||
|
<button
|
||||||
|
class="submit-btn"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
v-bind="attrs"
|
||||||
|
:class="[
|
||||||
|
`variant-${props.variant}`, // 动态绑定样式类
|
||||||
|
{ 'is-loading': props.loading } // 加载状态类
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 使用 Options API 块设置配置选项
|
||||||
|
export default {
|
||||||
|
// 阻止父组件透传的属性（如 @click, style, data-*）默认应用到根元素 <div> 上
|
||||||
|
inheritAttrs: false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, useAttrs, onMounted } from 'vue';
|
||||||
|
import feather from 'feather-icons'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// 按钮样式变体：primary, secondary, danger, text
|
||||||
|
'variant': {
|
||||||
|
type: String,
|
||||||
|
default: 'primary',
|
||||||
|
validator: (value) => ['primary', 'secondary', 'danger', 'text'].includes(value)
|
||||||
|
},
|
||||||
|
// 明确接收 disabled 属性，以便在脚本中控制和类型检查
|
||||||
|
'disabled': {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 加载状态 (可以与 disabled 结合使用)
|
||||||
|
'loading': {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取所有未被 props 声明接收的属性 (透传属性)
|
||||||
|
const attrs = useAttrs()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ======================================= */
|
||||||
|
/* 基础样式和布局 */
|
||||||
|
/* ======================================= */
|
||||||
|
.submit-btn {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
/* 布局：使用 Flex 确保图标和文本对齐 */
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px; /* 文本和图标之间的间距 */
|
||||||
|
|
||||||
|
transition: all 0.2s, transform 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 交互状态 */
|
||||||
|
.submit-btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
.submit-btn:disabled,
|
||||||
|
.submit-btn.is-loading {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
pointer-events: none; /* 禁用点击事件 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ======================================= */
|
||||||
|
/* 样式变体 (Variants) */
|
||||||
|
/* ======================================= */
|
||||||
|
|
||||||
|
/* --- 1. Primary (主色调) --- */
|
||||||
|
.variant-primary {
|
||||||
|
background: #4f46e5; /* Indigo 品牌蓝 */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.variant-primary:hover {
|
||||||
|
background: #4338ca;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 2. Secondary (次要/灰色调) --- */
|
||||||
|
.variant-secondary {
|
||||||
|
background: #e2e8f0; /* Slate 浅灰 */
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
.variant-secondary:hover {
|
||||||
|
background: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 3. Danger (危险/红色调) --- */
|
||||||
|
.variant-danger {
|
||||||
|
background: #ef4444; /* Red 红色 */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.variant-danger:hover {
|
||||||
|
background: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 4. Text (文本按钮/无背景) --- */
|
||||||
|
.variant-text {
|
||||||
|
background: transparent;
|
||||||
|
color: #4f46e5;
|
||||||
|
padding: 10px 12px; /* 减小 padding 以适应文本按钮 */
|
||||||
|
}
|
||||||
|
.variant-text:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
background: transparent;
|
||||||
|
color: #4338ca;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,19 +2,24 @@
|
|||||||
|
|
||||||
<div id="Test">
|
<div id="Test">
|
||||||
<MyInput icon-name="user"></MyInput>
|
<MyInput icon-name="user"></MyInput>
|
||||||
|
<MyButton >登录...</MyButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import MyInput from '@/components/MyInput.vue';
|
import MyInput from '@/components/IconInput.vue';
|
||||||
|
import MyButton from '@/components/MyButton.vue';
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
#Test {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user