添加按钮的disable组件并使用

package.json

@@ -7,7 +7,6 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --watch -d --progress --color --open",
     "test": "cross-env NODE_ENV=test webpack --progress --hide-modules",
     "prod": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-
   },
   "keywords": [
     "webpack"
@@ -48,6 +47,7 @@
     "moment": "^2.13.0",
     "video.js": "^5.11.9",
     "vue": "^2.0.8",
+    "vue-disabled": "^0.0.2",
     "vue-router": "^2.5.3"
   }
 }

src/pages/code.vue

@@ -43,7 +43,7 @@
             <p><i v-show="!hasResult"></i>请填写手机号 <br/> 快查官方将 “第一时间” 为您提供服务</p>
             <div class="provide-phone">
                 <input v-model="telephone" type="text" placeholder="请输入手机号">
-                <button @click="missFeedback">提交</button>
+                <button v-disabled="missFeedbackRuning" @click="missFeedback">提交</button>
             </div>
         </div>
 
@@ -66,10 +66,14 @@
     import weixinShare from '../utils/weixin-share';
     import shareImg from '../components/share-image';
     import api from '../utils/api';
+    import VueDisabled from 'vue-disabled'
+    import Vue from 'vue'
+    Vue.use(VueDisabled);
 
     export default {
         data() {
             return {
+                missFeedbackRuning: false,
                 hasResult: false,
                 contact: '',
                 content: '',
@@ -164,20 +168,23 @@
                 if (this.telephone == '') {
                     return false;
                 }
+                self.missFeedbackRuning = true;
                 api.post('feedback/add-miss', {
-					'contact': this.telephone,
-					'brand-id': this.brandId,
-					'category-id': this.categoryId,
-					'code': this.code,
-				}).done(function (rep) {
-					if (!rep.status) {
-						layer.alert(rep.message);
-					} else {
-						self.$router.push({path:"/"});
-					}
-				}).fail(function () {
-					layer.alert('反馈错误');
-				});
+                    'contact': this.telephone,
+                    'brand-id': this.brandId,
+                    'category-id': this.categoryId,
+                    'code': this.code,
+                }).done(function (rep) {
+                    if (!rep.status) {
+                        layer.alert(rep.message);
+                    } else {
+                        self.$router.push({path: "/"});
+                    }
+                    self.missFeedbackRuning = false;
+                }).fail(function () {
+                    layer.alert('反馈错误');
+                    self.missFeedbackRuning = false;
+                });
             },
             back() {
                 history.back();
@@ -188,22 +195,22 @@
                     return false;
                 }
 
-				let self = this;
+                let self = this;
 
                 api.post('feedback/add', {
-					'content': this.content,
-					'contact': this.contact
-				}).done(function (rep) {
-					if (!rep.status) {
-						layer.alert(rep.message);
-					} else {
-						self.showFeedback = false;
-						self.contact = '';
-						self.content = '';
-					}
-				}).fail(function () {
-					layer.alert('反馈错误');
-				});
+                    'content': this.content,
+                    'contact': this.contact
+                }).done(function (rep) {
+                    if (!rep.status) {
+                        layer.alert(rep.message);
+                    } else {
+                        self.showFeedback = false;
+                        self.contact = '';
+                        self.content = '';
+                    }
+                }).fail(function () {
+                    layer.alert('反馈错误');
+                });
             },
             thumbClick(way) {
                 let self = this;
@@ -242,4 +249,6 @@
         }
     }
 </script>
-<style>body{background-color: #f3f3f3}</style>
\ No newline at end of file
+<style>body {
+    background-color: #f3f3f3
+}</style>
\ No newline at end of file