Merge branch 'develop'

TIGERB · Jul 22, 2016 · d8923b5 · d8923b5
2 parents 2e91ea9 + 7155f78
commit d8923b5
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -3,12 +3,19 @@
 > a easy sample to use vue to implement easy web
 
 ### Version 0.1.1
+---
 
 > [download](https://github.com/TIGERB/easy-vue/releases/tag/v0.1.1)
 
+### Demo
+---
+
+> <http://tigerb.github.io/easy-vue>
+
 ### How To Use ?
+----
 
-* `php environment to use server.php simulate api`
 * `npm install`
 * `bower install`
 * `npm run test (develop environment) OR npm run build (production environment)`
+* `php environment to use server.php simulate api`
diff --git a/app.js b/app.js
@@ -3,17 +3,24 @@ var VueRouter    = require('vue-router'); //get vue-router
 var App 　　　   = require('./app.vue');// get root module
 
 Vue.use(VueRouter);//error:　Please install the Router with Vue.use() before creating an instance
-var router   	 = new VueRouter();//init
+var router   	 = new VueRouter({
+    // history: true, //this config is to del anchor point like "#!"
+    // saveScrollPosition: true 
+});//init
 var viewPath 	 = './src/views/';//component src
 
 router.map({
   '/':{
     name:'',
-    component:require(viewPath+'home.vue')
+    component:require(viewPath+'pageone.vue')
   },
-  '/home':{
-    name:'home',
-    component:require(viewPath+'home.vue')
+  '/two':{
+    name:'two',
+    component:require(viewPath+'pagetwo.vue')
+  },
+  '/three':{
+    name:'three',
+    component:require(viewPath+'pagethree.vue')
   }
 });
 

diff --git a/src/components/bar.vue b/src/components/bar.vue
diff --git a/src/components/barBottom.vue b/src/components/barBottom.vue
@@ -0,0 +1,54 @@
+<template>
+	<nav class="bar bar-tab easy-bottom-bar">
+	  <a class="tab-item" href="#"  v-link="{path:'/'}">
+	    <span class="icon fa fa-weixin" :class="{'easy-fa-color': isOnePage}"></span>
+	    <span class="tab-label" :class="{'easy-fa-color': isOnePage}">pageone</span>
+	  </a>
+	  <a class="tab-item" href="#" v-link="{path:'/two'}">
+	    <span class="icon icon-pages" :class="{'easy-fa-color': isTwoPage}"></span>
+	    <span class="tab-label" :class="{'easy-fa-color': isTwoPage}">pagetwo</span>
+	  </a>
+	  <a class="tab-item" href="#" v-link="{path:'/three'}">
+	    <span class="icon icon-person" :class="{'easy-fa-color': isThreePage}"></span>
+	    <span class="tab-label" :class="{'easy-fa-color': isThreePage}">pagethree</span>
+	  </a>
+	</nav>
+</template>
+
+<script>
+  	module.exports = {
+  		data: function () {
+  			return {
+  				isOnePage: true,
+  				isTwoPage: false,
+  				isThreePage: false
+  			}
+  		},
+	    ready: function () {
+	    	var uri = window.location.hash;
+	    	if (uri === '#!/') {
+				this.isOnePage   = true;
+				this.isTwoPage   = false;
+				this.isThreePage = false;
+	    	}
+	    	if (uri === '#!/two') {
+				this.isOnePage   = false;
+				this.isTwoPage   = true;
+				this.isThreePage = false;
+	    	}
+	    	if (uri === '#!/three') {
+				this.isOnePage   = false;
+				this.isTwoPage   = false;
+				this.isThreePage = true;
+	    	}
+	    },
+	    methods: {
+	    	
+	    }
+  	}
+</script>
+<style>
+.easy-bottom-bar .easy-fa-color{
+	color: #428bca;
+}
+</style>
diff --git a/src/components/barTop.vue b/src/components/barTop.vue
@@ -0,0 +1,25 @@
+<template>
+  <header class="bar bar-nav bar-easy-vue">
+    <a class="icon icon-refresh pull-left" @click="refresh"></a>
+    <a class="icon icon-compose pull-right" @click="writeSome"></a>
+    <h1 class="title">hello vue</h1>
+  </header>
+</template>
+
+<script>
+  module.exports={
+    methods:{
+      writeSome:function () {
+        alert('write something');
+      },
+      refresh: function () {
+        // dispatch bar-top-refresh event to parent component
+        this.$dispatch('bar-top-refresh');
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/card.vue b/src/components/card.vue
@@ -20,6 +20,26 @@
       .then(function(response) {
         return response.json()
       }).then(function(json) {
+        //fake data
+        json = [
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+        ];
         self.results = json;
       }).catch(function(ex) {
         console.log(ex);
@@ -33,12 +53,38 @@
         .then(function(response) {
           return response.json()
         }).then(function(json) {
+          //fake data
+        json = [
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
+        ];
           self.results = self.results.concat(json);
         }).catch(function(ex) {
           console.log(ex);
         });
         this.busy = false;
       }
+    },
+    events:{
+      //catch refresh event boardcast by parent component
+      'refresh': function(){
+        this.results = [];
+      }
     }
 }
 </script>

diff --git a/src/views/home.vue b/src/views/home.vue
diff --git a/src/views/pageone.vue b/src/views/pageone.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <bar-top
+    @bar-top-refresh="refresh">
+    </bar-top>
+    <card></card>
+    <bar-bottom></bar-bottom>
+  </div> 
+</template>
+
+<script>
+  var barTop  = require('../components/barTop.vue');
+  var card = require('../components/card.vue');
+  var barBottom  = require('../components/barBottom.vue');
+
+  module.exports = {
+    components:{
+      'bar-top':barTop,
+      'card':card,
+      'bar-bottom':barBottom,
+    },
+    methods:{
+      refresh: function () {
+        //catch bar-top-refresh event dispatch by son component
+        //broadcast all son component to execute refresh event
+        this.$broadcast('refresh');
+      }
+    }
+  }
+</script>
+
+<style>
+  
+</style>
diff --git a/src/views/pagethree.vue b/src/views/pagethree.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <bar-top
+    @bar-top-refresh="refresh">
+    </bar-top>
+    <card></card>
+    <bar-bottom></bar-bottom>
+  </div> 
+</template>
+
+<script>
+  var barTop  = require('../components/barTop.vue');
+  var card = require('../components/card.vue');
+  var barBottom  = require('../components/barBottom.vue');
+
+  module.exports = {
+    components:{
+      'bar-top':barTop,
+      'card':card,
+      'bar-bottom':barBottom,
+    },
+    methods:{
+      refresh: function () {
+        //catch bar-top-refresh event dispatch by son component
+        //broadcast all son component to execute refresh event
+        this.$broadcast('refresh');
+      }
+    }
+  }
+</script>
+
+<style>
+  
+</style>
diff --git a/src/views/pagetwo.vue b/src/views/pagetwo.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <bar-top
+    @bar-top-refresh="refresh">
+    </bar-top>
+    <card></card>
+    <bar-bottom></bar-bottom>
+  </div> 
+</template>
+
+<script>
+  var barTop  = require('../components/barTop.vue');
+  var card = require('../components/card.vue');
+  var barBottom  = require('../components/barBottom.vue');
+
+  module.exports = {
+    components:{
+      'bar-top':barTop,
+      'card':card,
+      'bar-bottom':barBottom,
+    },
+    methods:{
+      refresh: function () {
+        //catch bar-top-refresh event dispatch by son component
+        //broadcast all son component to execute refresh event
+        this.$broadcast('refresh');
+      }
+    }
+  }
+</script>
+
+<style>
+  
+</style>