添加防抖按钮组件

examples/containers/NormalDialog.vue

@@ -40,6 +40,7 @@
       </form-area>
       <div slot="footer">
         <el-button
+          :debounce="300"
           type="primary"
           @click="showMessage"
         >确定</el-button>
@@ -51,9 +52,8 @@
 
 <script>
 import Vue from 'vue';
-import { Button, Input, Select, Option } from 'element-ui';
+import { Input, Select, Option } from 'element-ui';
 
-Vue.component(Button.name, Button);
 Vue.component(Input.name, Input);
 
 export default {
@@ -73,7 +73,7 @@ export default {
       done();
     },
     showMessage() {
-      this.$message.info('123123');
+      console.log('outClick');
     },
   },
 };

package-lock.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.8",
+  "version": "0.1.28",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9560,7 +9560,6 @@
       "version": "6.3.3",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz",
       "integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==",
-      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       }

package.json

@@ -22,6 +22,7 @@
     "element-ui": "^2.4.5",
     "normalize.css": "^8.0.1",
     "popmotion": "^8.5.5",
+    "rxjs": "^6.3.3",
     "vue": "^2.5.21",
     "vue-router": "^3.0.2",
     "vuex": "^3.0.1"

src/components/Button/Button.js

+import { Button } from 'element-ui';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+export default {
+  name: 'el-button',
+  extends: Button,
+  props: {
+    debounce: { type: Number },
+  },
+  data() {
+    return {
+      subject: null,
+    };
+  },
+  created() {
+    if (this.debounce) {
+      const subject = new Subject();
+      subject.pipe(debounceTime(this.debounce)).subscribe({
+        next: e => this.$emit('click', e),
+      });
+      this.subject = subject;
+    }
+  },
+  methods: {
+    handleClick(e) {
+      if (this.debounce) {
+        this.subject.next(e);
+      } else {
+        this.$emit('click', e);
+      }
+    },
+  },
+};

src/components/Button/index.js

+import Button from './Button';
+
+export default Button;

src/index.js

@@ -16,6 +16,7 @@ import FormLine from './components/FormLine/index';
 import FormItem from './components/FormItem/index';
 import Transfer from './components/Transfer/index';
 import Message from './components/Message/index';
+// import Button from './components/Button/index';
 
 const install = Vue => {
   // Layout
@@ -35,6 +36,7 @@ const install = Vue => {
   Vue.component(FormItem.name, FormItem);
   Vue.component(Transfer.name, Transfer);
   Vue.prototype.$message = Message;
+  // Vue.component(Button.name, Button);
 
   // Element-ui
   Vue.component(Select.name, Select);