xt-element-ui 1.4.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",

package/src/components/index.scss

@@ -27,17 +27,11 @@
 // Time 组件样式
 @import './xt-time/style/index.scss';
 
-// ExButton 组件样式
-@import './ex-button/style/index.scss';
-
-// ExCard 组件样式
-@import './ex-card/style/index.scss';
-
 // GridBox 组件样式
 @import './xt-grid-box/style/index.scss';
 
-// ExIcon 组件样式
-@import './ex-icon/style/index.scss';
+// Icon 组件样式
+@import './xt-icon/style/index.scss';
 
 // Progress 组件样式
 @import './xt-progress/style/index.scss';

package/src/components/xt-button/index.js

@@ -1,8 +1,8 @@
-import XtButton from './index.vue'
-
-XtButton.install = function (Vue) {
-  Vue.component(XtButton.name, XtButton)
-}
-
-export default XtButton
-export { XtButton }
+import XtButton from './index.vue'
+
+XtButton.install = function (Vue) {
+  Vue.component(XtButton.name, XtButton)
+}
+
+export default XtButton
+export { XtButton }

package/src/components/xt-button/index.vue

@@ -1,97 +1,67 @@
 <template>
-  <button
-    class="xt-button"
-    :class="[
-      type ? 'xt-button--' + type : '',
-      size ? 'xt-button--' + size : '',
-      {
-        'is-plain': plain,
-        'is-disabled': disabled,
-        'is-round': round,
-        'is-circle': circle,
-        'is-dashed': dashed,
-        'is-text': text,
-        'is-link': link,
-        'is-loading': loading
-      }
-    ]"
-    :disabled="disabled || loading"
+  <el-button 
+    class="ex-button" 
+    :class="buttonClasses"
+    v-bind="$attrs" 
     @click="handleClick"
   >
-    <i v-if="loading" class="el-icon-loading"></i>
-    <i v-else-if="icon" :class="iconClass"></i>
-    <span v-if="$slots.default" class="xt-button__inner">
-      <slot></slot>
-    </span>
-  </button>
+    <slot></slot>
+  </el-button>
 </template>
-
 <script>
 export default {
   name: 'XtButton',
+  inheritAttrs: false,
+  inject: {
+    xtConfig: {
+      default: () => ({
+        theme: 'light',
+        size: 'medium',
+        primaryColor: '#1890ff'
+      })
+    }
+  },
   props: {
     type: {
       type: String,
-      default: '',
-      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
-    },
-    size: {
-      type: String,
-      default: '',
-      validator: (val) => ['', 'large', 'medium', 'small'].includes(val)
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    round: {
-      type: Boolean,
-      default: false
+      default: 'default',
+      validator: (val) => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
     },
-    circle: {
-      type: Boolean,
-      default: false
+    throttle: {
+      type: Number,
+      default: 0
     },
-    dashed: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: Boolean,
-      default: false
-    },
-    link: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
+    size: {
       type: String,
-      default: ''
-    },
-    loading: {
-      type: Boolean,
-      default: false
+      default: null,
+      validator: (val) => !val || ['mini', 'small', 'medium', 'large'].includes(val)
+    }
+  },
+  data() {
+    return {
+      lastClickTime: 0
     }
   },
   computed: {
-    iconClass() {
-      if (!this.icon) return ''
-      if (this.icon.indexOf('el-icon') === 0) {
-        return this.icon
-      }
-      return 'el-icon-' + this.icon
+    finalSize() {
+      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
+      return this.size || this.xtConfig.size || 'medium'
+    },
+    buttonClasses() {
+      return [
+        `ex-button-${this.finalSize}`,
+        `ex-button-${this.type}`
+      ]
     }
   },
   methods: {
     handleClick() {
-      if (!this.disabled && !this.loading) {
-        this.$emit('click')
+      if (this.throttle > 0 && Date.now() - this.lastClickTime < this.throttle) {
+        return
       }
+      this.lastClickTime = Date.now()
+      this.$emit('click')
     }
   }
 }
-</script>
+</script>