update some

README.md

@@ -1,4 +1,5 @@
 # vux-2.0
-根据vux修改升级的2.0 
-暂时只有tab和swiper，后续会继续添加   
+根据vux修改升级的2.0
+持续更新中...
+交流qq群：537322257
 ![alt text]( http://og1rlwcj8.bkt.clouddn.com/7f4c4fe1gw1evv8bc0r3tj20go0ghjs3.jpg "Title")

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/demo/',
+    assetsPublicPath: '/vux2/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

src/Home.vue

@@ -20,7 +20,7 @@
           <badge text="捐赠"></badge>
         </div>
       </cell>
-      <cell title="Github" link="http://github.com/airyland/vux" value="Star me">
+      <cell title="Github" link="https://github.com/jinhuiWong/vux-2.0" value="Star me">
         <span class="demo-icon" slot="icon" style="color:#35495e;">&#xe62f;</span>
       </cell>
     </group>
@@ -46,6 +46,9 @@ export default {
 
 <style>
 @import './demos/style.css';
+.badge-value{
+  display: inline-block;
+}
 .center {
   margin-top: 15px;
   text-align: center;

src/components/icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <i class="{{className}}"></i>
+  <i :class="className"></i>
 </template>
 
 <script>

src/components/index.js

@@ -11,13 +11,13 @@ import Cell from './cell'
 // import Switch from './switch'
 // import XTextarea from './x-textarea'
 import Group from './group'
-// import GroupTitle from './group-title'
+import GroupTitle from './group-title'
 // import Box from './box'
 // import Tip from './tip'
 // import Selector from './selector'
 import XButton from './x-button'
-// import Swiper from './swiper'
-// import SwiperItem from './swiper-item'
+import Swiper from './swiper'
+import SwiperItem from './swiper-item'
 import Sticky from './sticky'
 // import Picker from './picker'
 // import Datetime from './datetime'
@@ -36,7 +36,7 @@ import Loading from './loading'
 // import XImg from './x-img'
 // import Spinner from './spinner'
 // import Calendar from './calendar'
-// import Icon from './icon'
+import Icon from './icon'
 // import Circle from './circle'
 // import ColorPicker from './color-picker'
 // import AddressChinaData from './address/list.json'
@@ -64,7 +64,7 @@ import ViewBox from './view-box'
 
 // import { ButtonTab, ButtonTabItem } from './button-tab'
 // import { Checker, CheckerItem } from './checker'
-// import { Flexbox, FlexboxItem } from './flexbox'
+import { Flexbox, FlexboxItem } from './flexbox'
 // import { Step, StepItem } from './step'
 // import { Timeline, TimelineItem } from './timeline'
 import { Tabbar, TabbarItem } from './tabbar'
@@ -75,7 +75,7 @@ const vux = {
   Group,
   // DevTip,
   // XInput,
-  // GroupTitle,
+  GroupTitle,
   // XNumber,
   // Checklist,
   // Switch,
@@ -86,12 +86,12 @@ const vux = {
   // InlineDesc,
   XButton,
   // XTextarea,
-  // Flexbox,
-  // FlexboxItem,
+  Flexbox,
+  FlexboxItem,
   Tab,
   TabItem,
-  // Swiper,
-  // SwiperItem,
+  Swiper,
+  SwiperItem,
   Sticky,
   // Picker,
   // Datetime,
@@ -110,7 +110,7 @@ const vux = {
   // XImg,
   // Spinner,
   // Calendar,
-  // Icon,
+  Icon,
   // Circle,
   // ColorPicker,
   // AddressChinaData,

src/components/popup/index.vue

@@ -19,7 +19,7 @@ export default {
       default: true
     }
   },
-  ready () {
+  mounted () {
     const _this = this
     this.popup = new Popup({
       container: _this.$el,

src/components/swiper-item/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  ready () {
+  mounted () {
     this.$parent.rerender()
   },
   beforeDestroy () {

src/components/swiper/index.vue

@@ -2,7 +2,7 @@
   <div class="vux-slider">
     <div class="vux-swiper" :style="{height: xheight}">
       <slot></slot>
-      <div class="vux-swiper-item" v-for="(index, item) in list" @click="clickListItem(item)" :data-index="index">
+      <div class="vux-swiper-item" v-for="(item, index) in list" @click="clickListItem(item)" :data-index="index">
         <a href="javascript:">
           <div class="vux-img" :style="{backgroundImage: buildBackgroundUrl(item.img)}"></div>
           <p class="vux-swiper-desc" v-if="showDescMask">{{item.title}}</p>
@@ -11,26 +11,25 @@
     </div>
     <div :class="[dotsClass, 'vux-indicator', 'vux-indicator-' + dotsPosition]" v-show="showDots">
       <a href="javascript:" v-for="key in length">
-        <i class="vux-icon-dot" :class="{'active': key === current}"></i>
+        <i class="vux-icon-dot" :class="{'active': key-1 === props_index }"></i>
       </a>
     </div>
   </div>
 </template>
 
 <script>
 import Swiper from './swiper'
-import { go } from '../../libs/router'
 
 export default {
-  ready () {
+  mounted () {
     if (!(this.list && this.list.length === 0)) {
       this.render()
     }
     this.xheight = this.getHeight()
   },
   methods: {
     clickListItem (item) {
-      go(item.url, this.$router)
+      this.$router.push(item.url);
       this.$emit('on-click-list-item', JSON.parse(JSON.stringify(item)))
     },
     buildBackgroundUrl (url) {
@@ -52,15 +51,15 @@ export default {
       })
       .on('swiped', (prev, index) => {
         this.current = index % this.length
-        this.index = index % this.length
+        this.props_index = index % this.length
       })
     },
     rerender () {
       if (!this.$el) {
         return
       }
       this.$nextTick(() => {
-        this.index = 0
+        this.props_index = 0
         this.current = 0
         this.length = this.list.length || this.$children.length
         this.destroy()
@@ -139,9 +138,10 @@ export default {
   },
   data () {
     return {
-      current: this.index,
+      current: this.props_index,
       xheight: 'auto',
-      length: this.list.length
+      length: this.list.length,
+      props_index:0
     }
   },
   watch: {
@@ -151,12 +151,15 @@ export default {
     current (currentIndex) {
       this.$emit('on-index-change', currentIndex)
     },
-    index (val) {
+    props_index:function(val){
       if (val !== this.current) {
         this.$nextTick(() => {
           this.swiper.go(val)
         })
       }
+    },
+    index (newIndex, oldIndex) {
+      this.props_index=newIndex;
     }
   },
   beforeDestroy () {

src/components/tabbar-bak/tabbar-item.vue

@@ -25,7 +25,6 @@ export default {
             }
         }
     },
-    // mixins: [childMixin],
     props: {
         showDot: {
             type: Boolean,

src/components/tabbar/tabbar-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <a href="javascript:;" class="weui_tabbar_item" :class="{'weui_bar_item_on': $parent.index === index}" @click="onItemClick">
+  <a href="javascript:;" class="weui_tabbar_item" :class="{'weui_bar_item_on': $parent.props_index === index}" @click="onItemClick">
     <div class="weui_tabbar_icon" :class="[iconClass || $parent.iconClass, {'vux-reddot': showDot}]">
       <slot name="icon"></slot>
       <sup><badge v-if="badge" :text="badge"></badge></sup>
@@ -11,15 +11,12 @@
 </template>
 
 <script>
-import { childMixin } from '../../mixins/multi-items'
-import { go } from '../../libs/router'
 import Badge from '../badge'
 
 export default {
   components: {
     Badge
   },
-  mixins: [childMixin],
   props: {
     showDot: {
       type: Boolean,
@@ -29,10 +26,33 @@ export default {
     link: [String, Object],
     iconClass: String
   },
-  events: {
-    'on-item-click': function () {
-      go(this.link, this.$router)
-    }
+  beforeMount(){
+      this.$on('on-item-click',function(index) {
+          this.link ? this.$router.push(this.link) : false;
+          this.$parent.$emit('onTabbarItemClick',index);
+      });
+  },
+  mounted(){
+      this.$parent.updateIndex()
+  },
+  beforeDestroy(){
+      const $parent = this.$parent
+      this.$nextTick(() => {
+          $parent.updateIndex()
+      })
+  },
+  methods: {
+      onItemClick () {
+          if (typeof this.disabled === 'undefined' || this.disabled === false) {
+              this.selected = true
+              this.$emit('on-item-click',this.index,true)
+          }
+      }
+  },
+  data () {
+      return {
+          index: 0
+      }
   }
 }
 </script>

src/components/tabbar/tabbar.vue

@@ -5,13 +5,58 @@
 </template>
 
 <script>
-import { parentMixin } from '../../mixins/multi-items'
 
 export default {
-  mixins: [parentMixin],
-  props: {
-    iconClass: String
-  }
+    mounted(){
+        this.updateIndex();
+        this.$on('onTabbarItemClick',function(index,selected){
+            this.props_index = index;
+            this.$emit('on-index-change', this.props_index);
+        });
+    },
+    props: {
+        iconClass: String,
+        activeColor:{
+            type:String,
+            default:'#f24549',
+        },
+        defaultColor:{
+            type:String,
+            default:'#9b9b9b',
+        },
+        index: {
+            type: Number,
+            default: 0
+        }
+    },
+    methods: {
+        updateIndex () {
+            if (!this.$children) return
+            this.number = this.$children.length
+            let children = this.$children
+            for (let i = 0; i < children.length; i++) {
+                children[i].index = i
+                if (children[i].index === this.index) {
+                    this.props_index = i
+                }
+            }
+        }
+    },
+    watch: {
+        index:function(newIndex, oldIndex){
+            this.props_index=newIndex;
+        },
+        props_index (newIndex, oldIndex) {
+            oldIndex > -1 && this.$children[oldIndex] && (this.$children[oldIndex].selected = false)
+            newIndex > -1 && (this.$children[newIndex].selected = true)
+        }
+    },
+    data () {
+        return {
+            number: this.$children.length,
+            props_index: -1
+        }
+    }
 }
 </script>
 

src/demos/Swiper.vue

@@ -89,15 +89,15 @@ import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from '../components'
 const baseList =
 [{
   url: 'javascript:',
-  img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
+  img: 'http://og1rlwcj8.bkt.clouddn.com/20141111234454_AwKCm.thumb.700_0.jpeg',
   title: '如何手制一份秋意的茶？'
 }, {
   url: 'javascript:',
-  img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
+  img: 'http://og1rlwcj8.bkt.clouddn.com/u=897623406,24655471&fm=21&gp=0.jpg',
   title: '茶包VS原叶茶'
 }, {
   url: 'javascript:',
-  img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
+  img: 'http://og1rlwcj8.bkt.clouddn.com/u=3737719926,1965507257&fm=21&gp=0.jpg',
   title: '播下茶籽，明春可发芽？'
 }]
 
@@ -128,7 +128,7 @@ export default {
     XButton,
     Divider
   },
-  ready () {
+  mounted () {
 
   },
   methods: {