浏览代码

fixed 模拟loading的案例

shenqistart 5 年之前
父节点
当前提交
4018f75109
共有 2 个文件被更改,包括 27 次插入7 次删除
  1. 11 2
      src/packages/button/demo.vue
  2. 16 5
      src/packages/button/doc.md

+ 11 - 2
src/packages/button/demo.vue

@@ -2,7 +2,7 @@
     <div>
         <h4>常规按钮</h4>
         <div class="bg">
-            <nut-button @click="clickHandler">去结算</nut-button>
+            <nut-button @click="clickHandler" :disabled="disabled">去结算</nut-button>
             <nut-button disabled>去结算(disabled)</nut-button>
         </div>
         <h4>常规按钮-小</h4>
@@ -71,10 +71,19 @@
 
 <script>
 export default {
+    data() {
+        return {
+            disabled: false
+        };
+    },
     methods: {
         clickHandler(e) {
-            alert("我点击了按钮");
+            // alert("我点击了按钮");
             console.log(e, "我点击了按钮");
+            this.disabled = true;
+            setTimeout(() => {
+                this.disabled = false;
+            }, 2000);
         }
     }
 };

+ 16 - 5
src/packages/button/doc.md

@@ -7,6 +7,7 @@
 ```html
 <nut-button 
   @click="clickHandler"
+  :disabled='disabled'
 >
   去结算
 </nut-button>
@@ -20,11 +21,21 @@
 
 ```javascript
 export default {
-  methods: {
-      clickHandler() {
-        alert('我点击了按钮');
-      }
-  }
+    data() {
+        return {
+            disabled: false
+        };
+    },
+    methods: {
+        clickHandler(e) {
+            // alert("我点击了按钮");
+            console.log(e, "我点击了按钮");
+            this.disabled = true;
+            setTimeout(() => {
+                this.disabled = false;
+            }, 2000);
+        }
+    }
 };
 ```