From 32bf0cfa90dd87a7d720680b4e57d25e0fa65a19 Mon Sep 17 00:00:00 2001
From: a-jie <a-jie.cn@msn.com>
Date: Fri, 27 Sep 2019 08:51:47 +0800
Subject: [PATCH] add radom btn

add radom btn
---
 source/.gitignore                 |  1 +
 source/src/components/Btn.vue     | 13 +++++++------
 source/src/components/Content.vue | 26 +++++++++++++++++++-------
 source/src/components/Footer.vue  |  2 +-
 source/src/utils/eventbus.js      |  4 ++++
 source/src/utils/util.js          | 15 +++++++++++++++
 6 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 source/src/utils/eventbus.js
 create mode 100644 source/src/utils/util.js

diff --git a/source/.gitignore b/source/.gitignore
index 185e663..8e52156 100755
--- a/source/.gitignore
+++ b/source/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+package-lock.json
 /dist
 
 # local env files
diff --git a/source/src/components/Btn.vue b/source/src/components/Btn.vue
index cd3c7cb..0d5f227 100644
--- a/source/src/components/Btn.vue
+++ b/source/src/components/Btn.vue
@@ -9,16 +9,17 @@
 
 <script>
 import ppo from 'ppo';
-import Vue from 'vue';
-const bus = new Vue();
+import EventBus from '../utils/eventbus';
 
 export default {
     name: 'Btn',
-    props: ['active'],
+    props: ['active', 'index'],
     created: function () {
-        bus.$on('BTN_CLICK', id => {
-            if (id !== this.id) {
+        EventBus.$on('BTN_CLICK', index => {
+            if (index !== this.index) {
                 this.isActive = false;
+            }else{
+                this.isActive = true;
             }
         });
 
@@ -35,7 +36,7 @@ export default {
     methods: {
         click() {
             this.isActive = true;
-            bus.$emit('BTN_CLICK', this.id);
+            //EventBus.$emit('BTN_CLICK', this.index);
         }
     }
 }
diff --git a/source/src/components/Content.vue b/source/src/components/Content.vue
index eba5462..c8f9cce 100644
--- a/source/src/components/Content.vue
+++ b/source/src/components/Content.vue
@@ -10,9 +10,10 @@
         <div class="row">
             <div class="col-lg-12">
                 <ul id="portfolio-flters">
-                    <Btn @click.native="tabClick(0)" active=true>Beautiful Style</Btn>
-                    <Btn @click.native="tabClick(1)">Creative Design</Btn>
-                    <Btn @click.native="tabClick(2)">Electronic Clock</Btn>
+                    <Btn v-for="btn in btns" :key="btn.index" :index="btn.index"
+                    @click.native="tabClick(btn.index)">
+                        {{ btn.text }}
+                    </Btn>
                 </ul>
             </div>
         </div>
@@ -40,9 +41,18 @@
 <script>
 import axios from 'axios';
 import yaml from 'js-yaml';
-import Btn from './Btn.vue'
+import Btn from './Btn.vue';
+import EventBus from '../utils/eventbus';
+import { arrShuffle } from '../utils/util';
 
-const PAGES = 9;
+const PAGES = 6;
+
+let BTNS = [
+    { index: 0, text: "Beautiful Style" },
+    { index: 1, text: "Creative Design" },
+    { index: 2, text: "Electronic Clock" }];
+
+BTNS = arrShuffle(BTNS);
 
 export default {
     name: 'Content',
@@ -51,9 +61,10 @@ export default {
     },
     data: function () {
         return {
-            currentTab: 0,
+            currentTab: BTNS[0].index,
             pageNum: 0,
             data: [],
+            btns: BTNS,
             get items() {
                 const frist = this.pageNum * PAGES;
                 const num = frist + PAGES;
@@ -61,7 +72,8 @@ export default {
                 return this.allItems ? this.allItems.slice(frist, num) : null;
             },
             get allItems() {
-                return this.data[this.currentTab]||[]
+                EventBus.$emit('BTN_CLICK', this.currentTab);
+                return this.data[this.currentTab] || []
             }
         }
     },
diff --git a/source/src/components/Footer.vue b/source/src/components/Footer.vue
index 2de2799..07e126c 100644
--- a/source/src/components/Footer.vue
+++ b/source/src/components/Footer.vue
@@ -3,7 +3,7 @@
     <div class="container">
       <div style="visibility: visible; animation-name: zoomIn;" class="col-md-12 text-center wow zoomIn">
         <div class="footer_copyright">
-          <p> © Copyright, a-jie All Rights Reserved.</p>
+          <p> © Copyright, anonymous All Rights Reserved.</p>
           <div class="credits">
             WebSite designed by <a href="https://bootstrapmade.com/">BootstrapMade.com</a>
           </div>
diff --git a/source/src/utils/eventbus.js b/source/src/utils/eventbus.js
new file mode 100644
index 0000000..8495352
--- /dev/null
+++ b/source/src/utils/eventbus.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+const EventBus = new Vue();
+
+export default EventBus;
\ No newline at end of file
diff --git a/source/src/utils/util.js b/source/src/utils/util.js
new file mode 100644
index 0000000..ddadc95
--- /dev/null
+++ b/source/src/utils/util.js
@@ -0,0 +1,15 @@
+const arrShuffle = (arr) => {
+    let len = arr.length;
+
+    for (let i = 0; i < len; i++) {
+        let end = len - 1;
+        let index = (Math.random() * (end + 1)) >> 0;
+        let t = arr[end];
+        arr[end] = arr[index];
+        arr[index] = t;
+    }
+
+    return arr;
+};
+
+export { arrShuffle };
\ No newline at end of file