add radom btn

add radom btn

source/.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+package-lock.json
 /dist
 
 # local env files

source/src/components/Btn.vue

@@ -9,16 +9,17 @@
 
 <script>
 import ppo from 'ppo';
-import Vue from 'vue';
+import EventBus from '../utils/eventbus';
-const bus = new Vue();
 
 export default {
     name: 'Btn',
-    props: ['active'],
+    props: ['active', 'index'],
     created: function () {
-        bus.$on('BTN_CLICK', id => {
+        EventBus.$on('BTN_CLICK', index => {
-            if (id !== this.id) {
+            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);
         }
     }
 }

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 v-for="btn in btns" :key="btn.index" :index="btn.index"
-                    <Btn @click.native="tabClick(1)">Creative Design</Btn>
+                    @click.native="tabClick(btn.index)">
-                    <Btn @click.native="tabClick(2)">Electronic Clock</Btn>
+                        {{ 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,6 +72,7 @@ export default {
                 return this.allItems ? this.allItems.slice(frist, num) : null;
             },
             get allItems() {
+                EventBus.$emit('BTN_CLICK', this.currentTab);
                 return this.data[this.currentTab] || []
             }
         }

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>

source/src/utils/eventbus.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+const EventBus = new Vue();
+
+export default EventBus;

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 };