zhl-button 1.0.1

package/README.md

@@ -0,0 +1,274 @@
+# ZhlButton - 简单实用的按钮组件
+
+一个轻量级、高度可定制的 JavaScript 按钮组件，支持多种类型、尺寸和交互状态。
+
+## 特性
+
+- 🎨 **多种按钮类型**: primary, secondary, success, danger, warning, info, light, dark, outline
+- 📏 **三种尺寸**: small, medium, large
+- ⚡ **加载状态**: 内置加载动画效果
+- ♿ **无障碍支持**: 完整的键盘导航和焦点管理
+- 📱 **响应式设计**: 适配移动端和桌面端
+- 🔧 **完全可定制**: 支持动态更新所有属性
+- 💫 **流畅动画**: hover 和 active 状态的平滑过渡效果
+
+## 安装
+
+### 浏览器直接引入
+
+### 版本号自行修改
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/zhl-button@1.0.8/index.js"></script>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/zhl-button@1.0.8/style.css"
+/>
+```
+
+### npm 安装
+
+```bash
+npm install zhl-button
+```
+
+## 使用方法
+
+### 基本用法
+
+```javascript
+// 创建基本按钮
+const button = new ZhlButton({
+  text: "点击我",
+  type: "primary",
+  onClick: () => {
+    console.log("按钮被点击了！");
+  },
+});
+
+// 添加到页面
+document.body.appendChild(button.element);
+```
+
+### 使用工厂方法
+
+```javascript
+// 使用静态方法创建按钮
+const button = ZhlButton.create({
+  text: "提交",
+  type: "success",
+  size: "large",
+  onClick: handleSubmit,
+});
+```
+
+### 完整示例
+
+```javascript
+// HTML 结构
+// <div id="my-buttons"></div>
+
+// JavaScript 代码
+const buttonContainer = document.getElementById("my-buttons");
+
+// 创建不同类型的按钮
+const buttons = [
+  { text: "主要按钮", type: "primary" },
+  { text: "次要按钮", type: "secondary" },
+  { text: "危险操作", type: "danger" },
+  { text: "警告", type: "warning" },
+  { text: "信息", type: "info" },
+];
+
+buttons.forEach((config) => {
+  const button = new ZhlButton({
+    ...config,
+    onClick: () => console.log(`点击了: ${config.text}`),
+  });
+
+  buttonContainer.appendChild(button.element);
+});
+```
+
+## 配置选项
+
+### 构造函数参数
+
+| 参数       | 类型     | 默认值    | 描述                                                                                |
+| ---------- | -------- | --------- | ----------------------------------------------------------------------------------- |
+| `text`     | string   | 'Button'  | 按钮显示文本                                                                        |
+| `type`     | string   | 'primary' | 按钮类型 (primary, secondary, success, danger, warning, info, light, dark, outline) |
+| `size`     | string   | 'medium'  | 按钮尺寸 (small, medium, large)                                                     |
+| `disabled` | boolean  | false     | 是否禁用按钮                                                                        |
+| `loading`  | boolean  | false     | 是否显示加载状态                                                                    |
+| `onClick`  | function | null      | 点击事件回调函数                                                                    |
+
+### 按钮类型
+
+- `primary` - 主要按钮，蓝色主题
+- `secondary` - 次要按钮，灰色主题
+- `success` - 成功按钮，绿色主题
+- `danger` - 危险按钮，红色主题
+- `warning` - 警告按钮，黄色主题
+- `info` - 信息按钮，青色主题
+- `light` - 浅色按钮，浅灰主题
+- `dark` - 深色按钮，深灰主题
+- `outline` - 边框按钮，透明背景蓝色边框
+
+### 按钮尺寸
+
+- `small` - 小尺寸，适合密集布局
+- `medium` - 中等尺寸，默认大小
+- `large` - 大尺寸，适合重要操作
+
+## API 方法
+
+### 实例方法
+
+```javascript
+const button = new ZhlButton({ text: "我的按钮" });
+
+// 更新按钮文本
+button.setText("新的文本");
+
+// 更新按钮类型
+button.setType("success");
+
+// 更新按钮尺寸
+button.setSize("large");
+
+// 设置禁用状态
+button.setDisabled(true);
+
+// 设置加载状态
+button.setLoading(true);
+
+// 销毁按钮
+button.destroy();
+```
+
+### 静态方法
+
+```javascript
+// 使用工厂方法创建按钮
+const button = ZhlButton.create({
+  text: "工厂按钮",
+  type: "warning",
+  size: "medium",
+});
+```
+
+## 样式定制
+
+### CSS 变量
+
+你可以通过覆盖 CSS 变量来自定义按钮样式：
+
+```css
+:root {
+  --zhl-btn-primary-bg: #your-color;
+  --zhl-btn-border-radius: 8px;
+  --zhl-btn-transition: all 0.3s ease;
+}
+```
+
+### 自定义样式
+
+```css
+/* 为特定按钮添加自定义样式 */
+.my-custom-btn {
+  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+  border-radius: 20px;
+  font-weight: bold;
+}
+
+.my-custom-btn:hover {
+  transform: scale(1.05);
+}
+```
+
+## 事件处理
+
+### 点击事件
+
+```javascript
+const button = new ZhlButton({
+  text: "提交表单",
+  type: "primary",
+  onClick: async (event) => {
+    // event 是原生的点击事件对象
+    console.log("按钮被点击", event);
+
+    // 显示加载状态
+    button.setLoading(true);
+
+    try {
+      // 执行异步操作
+      await submitForm();
+      console.log("提交成功");
+    } catch (error) {
+      console.error("提交失败:", error);
+    } finally {
+      button.setLoading(false);
+    }
+  },
+});
+```
+
+### 键盘事件
+
+按钮组件原生支持键盘导航：
+
+- `Tab` - 焦点切换
+- `Enter` 或 `Space` - 触发点击事件
+
+## 无障碍支持
+
+组件遵循 WCAG 2.1 无障碍标准：
+
+- 正确的 ARIA 属性
+- 键盘导航支持
+- 焦点管理
+- 屏幕阅读器友好
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 60+
+- Safari 12+
+- Edge 79+
+- iOS Safari 12+
+- Android Chrome 60+
+
+## 开发
+
+### 运行演示
+
+```bash
+npm run demo
+```
+
+### 文件结构
+
+```
+zhl-button/
+├── index.js          # 主组件文件
+├── style.css         # 样式文件
+├── demo.js           # 演示文件
+├── package.json      # 包配置
+└── README.md         # 说明文档
+```
+
+## 许可证
+
+MIT License
+
+## 更新日志
+
+### v1.0.0
+
+- 初始版本发布
+- 支持 9 种按钮类型
+- 支持 3 种尺寸
+- 加载状态和禁用状态
+- 完整的 API 和文档

package/Vue3/344/275/277/347/224/250/346/214/207/345/215/227.md

@@ -0,0 +1,459 @@
+# 🎯 Vue 3 使用指南
+
+本文档说明如何在 Vue 3 项目中直接导入使用 ZhlButton 组件。
+
+## 📦 安装
+
+```bash
+npm install zhl-button
+# 或
+yarn add zhl-button
+# 或
+pnpm add zhl-button
+```
+
+## 🚀 快速开始
+
+### ✨ 极简导入 - 无需引入 CSS！
+
+```vue
+<template>
+  <div>
+    <ZhlButton text="点击我" type="primary" @click="handleClick" />
+  </div>
+</template>
+
+<script setup>
+import ZhlButton from "zhl-button"; // 使用默认导入
+
+const handleClick = () => {
+  console.log("按钮被点击了！");
+};
+</script>
+```
+
+🎉 **样式会自动注入**，无需额外引入 CSS 文件！
+
+### 📝 导入方式说明
+
+```javascript
+// ✅ 推荐方式 - 默认导入
+import ZhlButton from "zhl-button";
+
+// ✅ 备用方式 - 命名导入
+import { ZhlButton } from "zhl-button";
+
+// ✅ 最安全方式 - 同时支持两种
+import ZhlButton, { ZhlButton as ZhlButtonComponent } from "zhl-button";
+```
+
+### 可选：手动引入样式（如果你需要自定义 CSS 变量）
+
+```vue
+<script setup>
+import { ZhlButton } from "zhl-button";
+import "zhl-button/style.css"; // 可选：用于CSS变量自定义
+</script>
+```
+
+## 🔧 Props 属性
+
+| 属性       | 类型    | 默认值    | 说明         |
+| ---------- | ------- | --------- | ------------ |
+| `text`     | String  | '按钮'    | 按钮显示文本 |
+| `type`     | String  | 'primary' | 按钮类型     |
+| `size`     | String  | 'medium'  | 按钮尺寸     |
+| `disabled` | Boolean | false     | 是否禁用     |
+| `loading`  | Boolean | false     | 是否加载中   |
+
+### 按钮类型
+
+- `primary` - 主要按钮（蓝色）
+- `secondary` - 次要按钮（灰色）
+- `success` - 成功按钮（绿色）
+- `danger` - 危险按钮（红色）
+- `warning` - 警告按钮（橙色）
+- `info` - 信息按钮（浅蓝色）
+- `light` - 浅色按钮（白色）
+- `dark` - 深色按钮（深色）
+- `outline` - 轮廓按钮（透明背景）
+
+### 按钮尺寸
+
+- `small` - 小按钮
+- `medium` - 中按钮
+- `large` - 大按钮
+
+## 📡 事件
+
+| 事件名            | 参数     | 说明         |
+| ----------------- | -------- | ------------ |
+| `click`           | event    | 按钮点击事件 |
+| `update:loading`  | loading  | 加载状态更新 |
+| `update:disabled` | disabled | 禁用状态更新 |
+
+## 💡 使用示例
+
+### 基础按钮
+
+```vue
+<template>
+  <div class="button-group">
+    <ZhlButton text="主要" type="primary" />
+    <ZhlButton text="次要" type="secondary" />
+    <ZhlButton text="成功" type="success" />
+    <ZhlButton text="危险" type="danger" />
+  </div>
+</template>
+
+<script setup>
+import { ZhlButton } from "zhl-button";
+import "zhl-button/style.css";
+</script>
+```
+
+### 不同尺寸
+
+```vue
+<template>
+  <div>
+    <ZhlButton text="小按钮" size="small" type="primary" />
+    <ZhlButton text="中按钮" size="medium" type="primary" />
+    <ZhlButton text="大按钮" size="large" type="primary" />
+  </div>
+</template>
+```
+
+### 响应式控制
+
+```vue
+<template>
+  <div>
+    <ZhlButton
+      :text="buttonText"
+      :type="buttonType"
+      :size="buttonSize"
+      :disabled="isDisabled"
+      :loading="isLoading"
+      @click="handleClick"
+    />
+
+    <div class="controls">
+      <input v-model="buttonText" placeholder="按钮文本" />
+      <select v-model="buttonType">
+        <option value="primary">主要</option>
+        <option value="secondary">次要</option>
+        <option value="success">成功</option>
+      </select>
+      <label> <input type="checkbox" v-model="isDisabled" /> 禁用 </label>
+      <label> <input type="checkbox" v-model="isLoading" /> 加载 </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ZhlButton } from "zhl-button";
+import "zhl-button/style.css";
+
+const buttonText = ref("可编辑按钮");
+const buttonType = ref("primary");
+const buttonSize = ref("medium");
+const isDisabled = ref(false);
+const isLoading = ref(false);
+
+const handleClick = () => {
+  console.log("按钮被点击");
+};
+</script>
+```
+
+### 表单提交示例
+
+```vue
+<template>
+  <div>
+    <form @submit.prevent="handleSubmit">
+      <input v-model="formData.email" placeholder="邮箱" />
+      <input v-model="formData.password" placeholder="密码" type="password" />
+
+      <ZhlButton
+        text="登录"
+        type="primary"
+        :loading="isSubmitting"
+        :disabled="!isFormValid || isSubmitting"
+        @click="handleSubmit"
+      />
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { ZhlButton } from "zhl-button";
+import "zhl-button/style.css";
+
+const formData = ref({
+  email: "",
+  password: "",
+});
+
+const isSubmitting = ref(false);
+
+const isFormValid = computed(() => {
+  return formData.value.email && formData.value.password.length >= 6;
+});
+
+const handleSubmit = async () => {
+  if (!isFormValid.value) return;
+
+  isSubmitting.value = true;
+
+  try {
+    // 模拟API请求
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    alert("登录成功！");
+  } catch (error) {
+    alert("登录失败");
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+</script>
+```
+
+## 🌐 全局注册
+
+### 在 main.js 中注册
+
+```javascript
+import { createApp } from "vue";
+import App from "./App.vue";
+import { ZhlButton } from "zhl-button";
+import "zhl-button/style.css";
+
+const app = createApp(App);
+
+// 全局注册组件
+app.component("ZhlButton", ZhlButton);
+
+app.mount("#app");
+```
+
+### 在组件中使用
+
+```vue
+<template>
+  <div>
+    <ZhlButton text="全局按钮" type="success" />
+  </div>
+</template>
+
+<!-- 无需导入，直接使用 -->
+```
+
+## 🎨 样式自定义
+
+### CSS 变量覆盖
+
+```css
+/* 在全局样式中定义 */
+:root {
+  --zhl-btn-primary-bg: #your-color;
+  --zhl-btn-primary-hover: #your-hover-color;
+}
+```
+
+### 深度样式覆盖
+
+```vue
+<template>
+  <div class="custom-container">
+    <ZhlButton text="自定义按钮" type="primary" class="custom-btn" />
+  </div>
+</template>
+
+<style scoped>
+.custom-container :deep(.zhl-btn-primary) {
+  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+  border-radius: 25px;
+  font-weight: bold;
+}
+
+.custom-container :deep(.zhl-btn-primary:hover) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+</style>
+```
+
+## 📱 TypeScript 支持
+
+如果您使用 TypeScript，可以创建类型定义：
+
+```typescript
+// types/zhl-button.d.ts
+declare module "zhl-button" {
+  export interface ZhlButtonProps {
+    text?: string;
+    type?:
+      | "primary"
+      | "secondary"
+      | "success"
+      | "danger"
+      | "warning"
+      | "info"
+      | "light"
+      | "dark"
+      | "outline";
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    loading?: boolean;
+  }
+
+  export interface ZhlButtonEmits {
+    click: [event: Event];
+    "update:loading": [loading: boolean];
+    "update:disabled": [disabled: boolean];
+  }
+}
+```
+
+## 📦 包内容
+
+npm 包包含以下文件：
+
+- `index.js` - 原始 JavaScript 组件
+- `ZhlButton.vue` - Vue 3 组件
+- `style.css` - 样式文件
+- `vue.js` - Vue 入口文件
+- `README.md` - 文档
+
+## 🚀 完整示例
+
+这是一个完整的 Vue 3 页面示例：
+
+```vue
+<template>
+  <div class="app">
+    <h1>🎯 ZhlButton Vue 3 示例</h1>
+
+    <section>
+      <h2>基础按钮</h2>
+      <div class="button-group">
+        <ZhlButton text="主要" type="primary" @click="log('主要按钮')" />
+        <ZhlButton text="次要" type="secondary" @click="log('次要按钮')" />
+        <ZhlButton text="成功" type="success" @click="log('成功按钮')" />
+      </div>
+    </section>
+
+    <section>
+      <h2>响应式按钮</h2>
+      <ZhlButton
+        :text="dynamicText"
+        :type="dynamicType"
+        :size="dynamicSize"
+        :loading="isLoading"
+        @click="handleDynamicClick"
+      />
+
+      <div class="controls">
+        <input v-model="dynamicText" placeholder="按钮文本" />
+        <select v-model="dynamicType">
+          <option value="primary">主要</option>
+          <option value="secondary">次要</option>
+          <option value="success">成功</option>
+          <option value="danger">危险</option>
+        </select>
+        <select v-model="dynamicSize">
+          <option value="small">小</option>
+          <option value="medium">中</option>
+          <option value="large">大</option>
+        </select>
+        <label> <input type="checkbox" v-model="isLoading" /> 加载 </label>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ZhlButton } from "zhl-button";
+import "zhl-button/style.css";
+
+const dynamicText = ref("可编辑按钮");
+const dynamicType = ref("primary");
+const dynamicSize = ref("medium");
+const isLoading = ref(false);
+
+const log = (message) => {
+  console.log(message);
+  alert(`点击了: ${message}`);
+};
+
+const handleDynamicClick = () => {
+  isLoading.value = true;
+  setTimeout(() => {
+    isLoading.value = false;
+    alert("操作完成！");
+  }, 1500);
+};
+</script>
+
+<style scoped>
+.app {
+  padding: 40px 20px;
+  max-width: 1000px;
+  margin: 0 auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    sans-serif;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+section {
+  margin-bottom: 50px;
+  padding: 30px;
+  background: #f8f9fa;
+  border-radius: 12px;
+}
+
+h2 {
+  color: #495057;
+  margin-bottom: 20px;
+}
+
+.button-group {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.controls {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.controls input,
+.controls select {
+  padding: 8px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+}
+</style>
+```
+
+## 🔗 相关资源
+
+- `README.md` - 总体文档
+- `Vue3使用指南.md` - 本文档
+- `index.js` - 原始组件 API
+- `ZhlButton.vue` - Vue 组件源码
+
+立即在您的 Vue 3 项目中使用 ZhlButton 组件吧！