zhl-button 1.0.1

package/ZhlButton.vue

@@ -0,0 +1,283 @@
+<template>
+  <div ref="buttonRef" class="zhl-button-wrapper"></div>
+</template>
+
+<script setup>
+import { ref, onUnmounted, onMounted, watch, defineProps, defineEmits } from 'vue'
+
+// 导入原始组件和样式 - 样式会自动注入，无需额外引入
+import ZhlButton from './index.js'
+import './style.css'
+
+// 如果样式没有自动注入，手动添加样式标签（兼容性处理）
+if (typeof window !== 'undefined' && !document.querySelector('#zhl-button-styles')) {
+  const style = document.createElement('style')
+  style.id = 'zhl-button-styles'
+  style.textContent = `
+    /* ZhlButton 样式 - 自动注入 */
+    .zhl-btn {
+      display: inline-block;
+      border: none;
+      border-radius: 6px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
+                    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+      font-weight: 500;
+      text-align: center;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      position: relative;
+      overflow: hidden;
+      user-select: none;
+      outline: none;
+      padding: 8px 16px;
+      font-size: 14px;
+    }
+
+    .zhl-btn-primary {
+      background-color: #1890ff;
+      color: #fff;
+    }
+
+    .zhl-btn-primary:hover {
+      background-color: #096dd9;
+    }
+
+    .zhl-btn-secondary {
+      background-color: #6c757d;
+      color: #fff;
+    }
+
+    .zhl-btn-secondary:hover {
+      background-color: #5a6268;
+    }
+
+    .zhl-btn-success {
+      background-color: #52c41a;
+      color: #fff;
+    }
+
+    .zhl-btn-success:hover {
+      background-color: #389e0d;
+    }
+
+    .zhl-btn-danger {
+      background-color: #ff4d4f;
+      color: #fff;
+    }
+
+    .zhl-btn-danger:hover {
+      background-color: #cf1322;
+    }
+
+    .zhl-btn-warning {
+      background-color: #faad14;
+      color: #fff;
+    }
+
+    .zhl-btn-warning:hover {
+      background-color: #d48806;
+    }
+
+    .zhl-btn-info {
+      background-color: #13c2c2;
+      color: #fff;
+    }
+
+    .zhl-btn-info:hover {
+      background-color: #08979c;
+    }
+
+    .zhl-btn-light {
+      background-color: #f8f9fa;
+      color: #212529;
+      border: 1px solid #dee2e6;
+    }
+
+    .zhl-btn-light:hover {
+      background-color: #e9ecef;
+    }
+
+    .zhl-btn-dark {
+      background-color: #343a40;
+      color: #fff;
+    }
+
+    .zhl-btn-dark:hover {
+      background-color: #23272b;
+    }
+
+    .zhl-btn-outline {
+      background-color: transparent;
+      color: #1890ff;
+      border: 1px solid #1890ff;
+    }
+
+    .zhl-btn-outline:hover {
+      background-color: #1890ff;
+      color: #fff;
+    }
+
+    .zhl-btn-small {
+      padding: 4px 8px;
+      font-size: 12px;
+    }
+
+    .zhl-btn-medium {
+      padding: 8px 16px;
+      font-size: 14px;
+    }
+
+    .zhl-btn-large {
+      padding: 12px 24px;
+      font-size: 16px;
+    }
+
+    .zhl-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .zhl-btn.zhl-btn-loading {
+      pointer-events: none;
+      opacity: 0.8;
+    }
+
+    .zhl-btn.zhl-btn-loading::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 16px;
+      height: 16px;
+      margin: -8px 0 0 -8px;
+      border: 2px solid transparent;
+      border-top-color: currentColor;
+      border-radius: 50%;
+      animation: zhl-btn-spin 1s linear infinite;
+    }
+
+    @keyframes zhl-btn-spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `
+  document.head.appendChild(style)
+}
+
+// Props定义
+const props = defineProps({
+  // 按钮文本
+  text: {
+    type: String,
+    default: '按钮'
+  },
+  // 按钮类型
+  type: {
+    type: String,
+    default: 'primary',
+    validator: (value) => [
+      'primary', 'secondary', 'success', 'danger', 'warning',
+      'info', 'light', 'dark', 'outline'
+    ].includes(value)
+  },
+  // 按钮尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 是否加载中
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits定义
+const emit = defineEmits(['click', 'update:loading', 'update:disabled'])
+
+// Refs
+const buttonRef = ref(null)
+const buttonInstance = ref(null)
+
+// 创建按钮实例
+const createButton = () => {
+  if (!buttonRef.value) return
+
+  // 清理之前的实例
+  if (buttonInstance.value) {
+    buttonInstance.value.destroy()
+  }
+
+  // 创建新的按钮实例
+  buttonInstance.value = new ZhlButton({
+    text: props.text,
+    type: props.type,
+    size: props.size,
+    disabled: props.disabled,
+    loading: props.loading,
+    onClick: handleClick
+  })
+
+  // 渲染到容器
+  buttonInstance.value.render(buttonRef.value)
+}
+
+// 处理点击事件
+const handleClick = (event) => {
+  emit('click', event)
+}
+
+// 更新按钮属性
+const updateButton = () => {
+  if (!buttonInstance.value) return
+
+  // 更新各个属性
+  buttonInstance.value.setText(props.text)
+  buttonInstance.value.setType(props.type)
+  buttonInstance.value.setSize(props.size)
+  buttonInstance.value.setDisabled(props.disabled)
+  buttonInstance.value.setLoading(props.loading)
+
+  // 触发更新事件
+  emit('update:disabled', props.disabled)
+  emit('update:loading', props.loading)
+}
+
+// 生命周期
+onMounted(() => {
+  createButton()
+})
+
+onUnmounted(() => {
+  if (buttonInstance.value) {
+    buttonInstance.value.destroy()
+  }
+})
+
+// 监听props变化
+watch(
+  () => [props.text, props.type, props.size, props.disabled, props.loading],
+  () => {
+    updateButton()
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped>
+.zhl-button-wrapper {
+  display: inline-block;
+}
+
+/* 可以在这里添加组件特定的样式 */
+.zhl-button-wrapper :deep(.zhl-btn) {
+  /* Vue scoped样式覆盖 */
+}
+</style>

package/demo.js

@@ -0,0 +1,237 @@
+// ZhlButton Component Demo
+// 导入按钮组件
+const ZhlButton = require("./index.js");
+
+console.log("=== ZhlButton Component Demo ===\n");
+
+// 等待 DOM 加载完成
+if (typeof document !== "undefined") {
+  document.addEventListener("DOMContentLoaded", function () {
+    initDemo();
+  });
+} else {
+  // Node.js 环境下的演示
+  initNodeDemo();
+}
+
+function initDemo() {
+  console.log("初始化演示页面...");
+
+  // 创建演示容器
+  const demoContainer = document.createElement("div");
+  demoContainer.style.cssText = `
+    padding: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  `;
+  demoContainer.innerHTML = `
+    <h1 style="color: #333; margin-bottom: 40px;">ZhlButton 组件演示</h1>
+    
+    <section style="margin-bottom: 40px;">
+      <h2 style="color: #555; margin-bottom: 20px;">基本按钮类型</h2>
+      <div id="basic-types" style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px;"></div>
+    </section>
+    
+    <section style="margin-bottom: 40px;">
+      <h2 style="color: #555; margin-bottom: 20px;">按钮尺寸</h2>
+      <div id="sizes" style="display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-bottom: 20px;"></div>
+    </section>
+    
+    <section style="margin-bottom: 40px;">
+      <h2 style="color: #555; margin-bottom: 20px;">交互演示</h2>
+      <div id="interactive" style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px;"></div>
+      <div id="status" style="padding: 15px; background: #f8f9fa; border-radius: 6px; margin-top: 20px;">
+        <strong>状态:</strong> <span id="status-text">等待交互...</span>
+      </div>
+    </section>
+  `;
+
+  document.body.appendChild(demoContainer);
+
+  // 演示基本按钮类型
+  demoBasicTypes();
+
+  // 演示按钮尺寸
+  demoSizes();
+
+  // 演示交互功能
+  demoInteractive();
+}
+
+function demoBasicTypes() {
+  const container = document.getElementById("basic-types");
+  const types = [
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "info",
+    "light",
+    "dark",
+    "outline",
+  ];
+
+  types.forEach((type) => {
+    const button = new ZhlButton({
+      text: type.charAt(0).toUpperCase() + type.slice(1),
+      type: type,
+      onClick: () => updateStatus(`点击了 ${type} 按钮`),
+    });
+
+    container.appendChild(button.element);
+  });
+}
+
+function demoSizes() {
+  const container = document.getElementById("sizes");
+  const sizes = ["small", "medium", "large"];
+
+  sizes.forEach((size) => {
+    const button = new ZhlButton({
+      text: `${size.charAt(0).toUpperCase() + size.slice(1)} Button`,
+      size: size,
+      type: "primary",
+      onClick: () => updateStatus(`点击了 ${size} 尺寸按钮`),
+    });
+
+    container.appendChild(button.element);
+  });
+}
+
+function demoInteractive() {
+  const container = document.getElementById("interactive");
+
+  // 带点击事件的按钮
+  const clickButton = new ZhlButton({
+    text: "点击我",
+    type: "success",
+    onClick: () => {
+      updateStatus("按钮被点击了！");
+      clickButton.setText("再次点击我");
+    },
+  });
+
+  // 加载状态按钮
+  const loadingButton = new ZhlButton({
+    text: "加载演示",
+    type: "info",
+    onClick: () => {
+      loadingButton.setLoading(true);
+      updateStatus("正在加载...");
+
+      setTimeout(() => {
+        loadingButton.setLoading(false);
+        updateStatus("加载完成！");
+      }, 3000);
+    },
+  });
+
+  // 禁用状态按钮
+  const disabledButton = new ZhlButton({
+    text: "禁用按钮",
+    type: "danger",
+    disabled: true,
+    onClick: () => updateStatus("这个按钮被禁用了"),
+  });
+
+  // 动态更新按钮
+  const dynamicButton = new ZhlButton({
+    text: "点击改变类型",
+    type: "secondary",
+    onClick: () => {
+      const types = ["primary", "secondary", "success", "warning"];
+      const currentIndex = types.indexOf(dynamicButton.type);
+      const nextType = types[(currentIndex + 1) % types.length];
+      dynamicButton.setType(nextType);
+      updateStatus(`按钮类型已更改为: ${nextType}`);
+    },
+  });
+
+  container.appendChild(clickButton.element);
+  container.appendChild(loadingButton.element);
+  container.appendChild(disabledButton.element);
+  container.appendChild(dynamicButton.element);
+}
+
+function updateStatus(message) {
+  const statusText = document.getElementById("status-text");
+  if (statusText) {
+    statusText.textContent = message;
+    console.log("状态更新:", message);
+  }
+}
+
+// Node.js 环境下的演示
+function initNodeDemo() {
+  console.log("Node.js 环境演示");
+
+  // 检查是否支持 DOM
+  if (typeof document === "undefined") {
+    console.log("⚠️  当前环境不支持 DOM，仅演示组件配置功能");
+    console.log("");
+
+    // 演示不同类型的按钮配置
+    const buttonConfigs = [
+      { text: "主要按钮", type: "primary", size: "medium" },
+      { text: "次要按钮", type: "secondary", size: "small" },
+      { text: "成功按钮", type: "success", size: "large" },
+      { text: "危险按钮", type: "danger", disabled: true },
+      { text: "警告按钮", type: "warning", loading: true },
+    ];
+
+    console.log("📝 按钮配置示例:");
+    buttonConfigs.forEach((config, index) => {
+      console.log(`按钮 ${index + 1}:`, config);
+    });
+
+    console.log("");
+    console.log("🔧 API 方法演示:");
+    console.log("- ZhlButton.create(options): 工厂方法创建按钮");
+    console.log("- button.setText(text): 更新按钮文本");
+    console.log("- button.setType(type): 更新按钮类型");
+    console.log("- button.setSize(size): 更新按钮尺寸");
+    console.log("- button.setDisabled(disabled): 设置禁用状态");
+    console.log("- button.setLoading(loading): 设置加载状态");
+    console.log("- button.destroy(): 销毁按钮实例");
+
+    console.log("");
+    console.log("📚 支持的按钮类型:");
+    const types = [
+      "primary",
+      "secondary",
+      "success",
+      "danger",
+      "warning",
+      "info",
+      "light",
+      "dark",
+      "outline",
+    ];
+    console.log(types.join(", "));
+
+    console.log("");
+    console.log("📏 支持的按钮尺寸:");
+    const sizes = ["small", "medium", "large"];
+    console.log(sizes.join(", "));
+
+    console.log("");
+    console.log("✅ 要在浏览器中查看完整演示，请打开 index.html 文件");
+
+    return;
+  }
+
+  // 如果支持 DOM，则执行浏览器演示
+  console.log("✅ 检测到 DOM 支持，启动浏览器演示...");
+  initDemo();
+}
+
+// 如果在浏览器环境中，自动执行演示
+if (typeof window !== "undefined") {
+  window.demo = {
+    initDemo,
+    initNodeDemo,
+    updateStatus,
+  };
+}

package/index.d.ts

@@ -0,0 +1,46 @@
+// TypeScript 类型定义文件
+
+export interface ZhlButtonOptions {
+  text?: string;
+  type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
+  onClick?: (event: Event) => void;
+}
+
+export class ZhlButton {
+  constructor(options?: ZhlButtonOptions);
+  
+  text: string;
+  type: string;
+  size: string;
+  disabled: boolean;
+  loading: boolean;
+  element: HTMLElement | null;
+  
+  render(target: HTMLElement | string): HTMLElement;
+  setText(text: string): void;
+  setType(type: string): void;
+  setSize(size: string): void;
+  setDisabled(disabled: boolean): void;
+  setLoading(loading: boolean): void;
+  destroy(): void;
+  
+  static create(options?: ZhlButtonOptions): ZhlButton;
+}
+
+declare module 'zhl-button' {
+  import { DefineComponent } from 'vue';
+  
+  export const ZhlButton: DefineComponent<ZhlButtonProps>;
+  export const ZhlButtonComponent: DefineComponent<ZhlButtonProps>;
+}
+
+export interface ZhlButtonProps {
+  text?: string;
+  type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
+}

package/index.js

@@ -0,0 +1,114 @@
+/**
+ * ZhlButton - 一个简单实用的JavaScript按钮组件
+ * 支持多种类型、尺寸和交互功能
+ */
+
+class ZhlButton {
+  constructor(options = {}) {
+    this.text = options.text || "Button";
+    this.type = options.type || "primary";
+    this.size = options.size || "medium";
+    this.disabled = options.disabled || false;
+    this.onClick = options.onClick || null;
+    this.loading = options.loading || false;
+
+    this.element = null;
+    this.init();
+  }
+
+  init() {
+    this.element = document.createElement("button");
+    this.element.className = `zhl-btn zhl-btn-${this.type} zhl-btn-${this.size}`;
+    this.element.textContent = this.text;
+
+    if (this.disabled) {
+      this.element.disabled = true;
+    }
+
+    if (this.loading) {
+      this.element.classList.add("zhl-btn-loading");
+    }
+
+    if (this.onClick) {
+      this.element.addEventListener("click", this.onClick);
+    }
+  }
+
+  render(target) {
+    if (typeof target === "string") {
+      target = document.querySelector(target);
+    }
+
+    if (target) {
+      target.appendChild(this.element);
+    }
+
+    return this.element;
+  }
+
+  setText(text) {
+    this.text = text;
+    if (this.element) {
+      this.element.textContent = text;
+    }
+  }
+
+  setType(type) {
+    this.type = type;
+    if (this.element) {
+      this.element.className = `zhl-btn zhl-btn-${type} zhl-btn-${this.size}`;
+      if (this.loading) {
+        this.element.classList.add("zhl-btn-loading");
+      }
+    }
+  }
+
+  setSize(size) {
+    this.size = size;
+    if (this.element) {
+      this.element.className = `zhl-btn zhl-btn-${this.type} zhl-btn-${size}`;
+      if (this.loading) {
+        this.element.classList.add("zhl-btn-loading");
+      }
+    }
+  }
+
+  setDisabled(disabled) {
+    this.disabled = disabled;
+    if (this.element) {
+      this.element.disabled = disabled;
+    }
+  }
+
+  setLoading(loading) {
+    this.loading = loading;
+    if (this.element) {
+      if (loading) {
+        this.element.classList.add("zhl-btn-loading");
+      } else {
+        this.element.classList.remove("zhl-btn-loading");
+      }
+    }
+  }
+
+  destroy() {
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+
+  // 静态工厂方法
+  static create(options) {
+    return new ZhlButton(options);
+  }
+}
+
+// 导出组件
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = ZhlButton;
+} else if (typeof window !== "undefined") {
+  window.ZhlButton = ZhlButton;
+}
+
+// ES模块导出
+export default ZhlButton;