feat: 单个Button开发

package.json

@@ -7,6 +7,7 @@
     "dev": "pnpm --filter @breeze-ui/play dev",
     "docs:dev": "pnpm --filter @breeze-ui/docs dev",
     "docs:build": "pnpm --filter @breeze-ui/docs build",
+    "storybook": "pnpm --filter @breeze-ui/play storybook",
     "test": "pnpm --filter @breeze-ui/components test"
   },
   "keywords": [],

packages/components/Button/Button.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue"
-import type { ButtonProps } from "./interface.ts"
+import type { ButtonProps, ButtonEmits, ButtonInstance } from "./interface.ts"
+import { throttle } from "lodash-es";
 
 defineOptions({
   name: "bre-button"
@@ -9,11 +10,25 @@ defineOptions({
 const props = withDefaults(defineProps<ButtonProps>(), {
   tag: "button",
   nativeType: "button",
+  useThrottle: true,
+  throttleDuration: 300,
 })
 
+const emits = defineEmits<ButtonEmits>()
+
 const slots = defineSlots()
 
 const _ref = ref<HTMLButtonElement>()
+
+const handleBtnClick = (e: MouseEvent) => {
+  emits("click", e)
+}
+
+const handleBtnClickThrottle = throttle(handleBtnClick, props.throttleDuration)
+
+defineExpose<ButtonInstance>({
+  ref: _ref
+})
 </script>
 
 <template>
@@ -32,6 +47,7 @@ const _ref = ref<HTMLButtonElement>()
       'is-loading': loading,
       'is-disabled': disabled,
     }"
+    @click="(e: MouseEvent) => useThrottle ? handleBtnClickThrottle(e) : handleBtnClick(e)"
   >
     <slot></slot>
   </component>

packages/components/Button/interface.ts

@@ -1,4 +1,4 @@
-import type { Component } from "vue";
+import type {Component, Ref} from "vue";
 
 export type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
 export type NativeButtonType = 'button' |'submit' |'reset'
@@ -15,4 +15,17 @@ export interface ButtonProps {
     circle?: boolean
     plain?: boolean
     round?: boolean
-}
+    loadingIcon?: string
+    autoFocus?: boolean
+    useThrottle?: boolean
+    throttleDuration?: number
+}
+
+export interface ButtonEmits {
+    (e: "click", val: MouseEvent): void
+}
+
+export interface ButtonInstance {
+    ref: Ref<HTMLButtonElement | void>
+}
+

packages/play/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

packages/play/.storybook/main.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+};
+export default config;

packages/play/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/play/package.json

@@ -6,9 +6,20 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1"
+    "@chromatic-com/storybook": "3.2.4",
+    "@storybook/addon-essentials": "8.5.3",
+    "@storybook/addon-interactions": "8.5.3",
+    "@storybook/addon-onboarding": "8.5.3",
+    "@storybook/blocks": "8.5.3",
+    "@storybook/test": "8.5.3",
+    "@storybook/vue3": "8.5.3",
+    "@storybook/vue3-vite": "8.5.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "storybook": "8.5.3"
   }
 }

packages/play/src/App.vue

@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <bre-button type="primary" size="small">按钮</bre-button>
+  <bre-button type="primary" size="large" round="large">按钮</bre-button>
 </template>
 
 <style scoped>