add some

jinhuiWong · Dec 14, 2016 · 6d1f79b · 6d1f79b
1 parent 2309dbd
commit 6d1f79b
Show file tree

Hide file tree

Showing 20 changed files with 275 additions and 173 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,14 +1,5 @@
 {
   	"presets": ["es2015", "stage-2"],
-  	"plugins": ["transform-runtime", 
-  		["component", 
-  			[
-			    {
-			      "libraryName": "mint-ui",
-			      "style": true
-			    }
-  			]
-  		]
-  	],
+  	"plugins": ["transform-runtime"],
   	"comments": false
 }
diff --git a/src/components/index.js b/src/components/index.js
@@ -6,9 +6,9 @@ import Style from '../styles/index.vue' // eslint-disable-line
 // import XInput from './x-input'
 // import XNumber from './x-number'
 import Cell from './cell'
-// import InlineDesc from './inline-desc'
+import InlineDesc from './inline-desc'
 // import Checklist from './checklist'
-// import Switch from './switch'
+import XSwitch from './x-switch'
 // import XTextarea from './x-textarea'
 import Group from './group'
 import GroupTitle from './group-title'
@@ -21,20 +21,20 @@ import SwiperItem from './swiper-item'
 import Sticky from './sticky'
 // import Picker from './picker'
 // import Datetime from './datetime'
-// import Popup from './popup'
+import Popup from './popup'
 // import Range from './range'
 // import Actionsheet from './actionsheet'
 // import Clocker from './clocker'
 // import Rater from './rater'
 // import PopupPicker from './popup-picker'
 // import Address from './address'
-// import Toast from './toast'
+import Toast from './toast'
 import Loading from './loading'
 // import Alert from './alert'
 // import Confirm from './confirm'
 // import Progress from './progress'
 // import XImg from './x-img'
-// import Spinner from './spinner'
+import Spinner from './spinner'
 // import Calendar from './calendar'
 import Icon from './icon'
 // import Circle from './circle'
@@ -43,7 +43,7 @@ import Icon from './icon'
 import Divider from './divider'
 // import Blur from './blur'
 // import Countup from './countup'
-// import Scroller from './scroller'
+import Scroller from './scroller'
 // import Shake from './shake'
 // import WechatEmotion from './wechat-emotion'
 // import Search from './search'
@@ -78,12 +78,12 @@ const vux = {
   GroupTitle,
   // XNumber,
   // Checklist,
-  // Switch,
+  XSwitch,
   // Box,
   // Tip,
   // Selector,
   Cell,
-  // InlineDesc,
+  InlineDesc,
   XButton,
   // XTextarea,
   Flexbox,
@@ -95,20 +95,20 @@ const vux = {
   Sticky,
   // Picker,
   // Datetime,
-  // Popup,
+  Popup,
   // Range,
   // Actionsheet,
   // Clocker,
   // Rater,
   // PopupPicker,
   // Address,
-  // Toast,
+  Toast,
   Loading,
   // Alert,
   // Confirm,
   // Progress,
   // XImg,
-  // Spinner,
+  Spinner,
   // Calendar,
   Icon,
   // Circle,
@@ -117,7 +117,7 @@ const vux = {
   Divider,
   // Blur,
   // Countup,
-  // Scroller,
+  Scroller,
   // Shake,
   // WechatEmotion,
   // Search,

diff --git a/src/components/popup/index.vue b/src/components/popup/index.vue
@@ -1,7 +1,11 @@
 <template>
-  <div v-show="show" transition="vux-popup" :style="{height:height}" class="vux-popup">
-    <slot></slot>
-  </div>
+    <transition  name="vux-popup">
+      <div v-show="props_show" :style="{height:height}" class="vux-popup">
+        <!-- 此处input只做双向数据绑定用(props 的value 属性必须有)-->
+        <input v-model="props_show" style="display:none">
+        <slot></slot>
+      </div>
+    </transition>
 </template>
 
 <script>
@@ -10,6 +14,7 @@ import Popup from './popup'
 export default {
   props: {
     show: Boolean,
+    value:Boolean,
     height: {
       type: String,
       default: 'auto'
@@ -27,10 +32,10 @@ export default {
       hideOnBlur: _this.hideOnBlur,
       onOpen (dialog) {
         _this.fixSafariOverflowScrolling('auto')
-        _this.show = true
+        _this.props_show = true
       },
       onClose (dialog) {
-        _this.show = false
+        _this.props_show = false
         if (Object.keys(window.__$vuxPopups).length >= 1) return
         _this.fixSafariOverflowScrolling('touch')
       }
@@ -52,11 +57,18 @@ export default {
   },
   data () {
     return {
-      hasFirstShow: false
+      hasFirstShow: false,
+      props_show: false
     }
   },
   watch: {
     show (val) {
+      this.props_show=val
+    },
+    value(val){
+      this.props_show=val
+    },
+    props_show(val){
       if (val) {
         this.popup.show()
         this.$emit('on-show')
@@ -69,6 +81,7 @@ export default {
         this.show = false
         this.popup.hide(false)
       }
+      this.$emit('input',val);
     }
   },
   beforeDestroy () {
@@ -89,8 +102,6 @@ export default {
   width: 100%;
   background: #eee;
   z-index: 101;
-  transition-property: transform;
-  transition-duration: 300ms;
 }
 .vux-popup-mask {
   display: block;
@@ -109,11 +120,11 @@ export default {
   z-index: 100;
   transition: opacity 0.3s;
 }
-.vux-popup-transiton {}
-.vux-popup-enter {
-  transform: translate3d(0, 100%, 0);
+
+.vux-popup-enter-active, .vux-popup-leave-active {
+  transition: transform .3s
 }
-.vux-popup-leave {
+.vux-popup-enter, .vux-popup-leave-active {
   transform: translate3d(0, 100%, 0);
 }
 </style>
diff --git a/src/components/scroller/index.vue b/src/components/scroller/index.vue
@@ -122,21 +122,66 @@ export default {
   },
   computed: {
     styles () {
-      if (!this.height && !this.$el.style.height && this.lockX) {
-        this.height = `${document.documentElement.clientHeight}px`
+      if (!this.props_height && this.elHeight && this.lockX) {
+        this.props_height = `${document.documentElement.clientHeight}px`
         this.reset()
       }
 
-      if (this.height && this.height.indexOf('-') === 0) {
-        this.height = `${document.documentElement.clientHeight + parseInt(this.height)}px`
+      if (this.props_height && this.props_height.indexOf('-') === 0) {
+        this.props_height = `${document.documentElement.clientHeight + parseInt(this.props_height)}px`
       }
 
       return {
-        height: `${this.height}`
+        height: `${this.props_height}`
       }
     }
   },
-  ready () {
+    beforeMount() {
+    this.uuid = Math.random().toString(36).substring(3, 8);
+    //fix2.0
+    this.props_height=this.height;
+    this.props_pulldownStatus=this.pulldownStatus;
+    //on事件
+    this.$on('pulldown:reset',function(uuid) {
+      // set pulldown status to default
+      this.props_pulldownStatus = 'default'
+      if (uuid === this.uuid) {
+        this.pulldown.reset(() => {
+          // repaint
+          this.reset()
+        })
+      }
+    });
+    this.$on('pullup:reset',function(uuid) {
+      // set pulldown status to default
+      this._pullupStatus = 'default'
+      if (uuid === this.uuid) {
+        this.pullup.complete()
+        this.reset()
+      }
+    });
+    this.$on('pullup:done' ,function(uuid) {
+      if (uuid === this.uuid) {
+        this._xscroll.unplug(this.pullup)
+      }
+    });
+    this.$on('scroller:reset' ,function(uuid) {
+      if (uuid === this.uuid) {
+        this.reset()
+      }
+    });
+    this.$on('pullup:disable',function(uuid) {
+      if (uuid === this.uuid) {
+        this.pullup.stop()
+      }
+    });
+    this.$on('pullup:enable',function(uuid) {
+      if (uuid === this.uuid) {
+        this.pullup.restart()
+      }
+    });
+  },
+  mounted () {
     this.$el.setAttribute('id', `vux-scroller-${this.uuid}`)
     let content = null
     const slotChildren = this.$el.querySelector('.xs-container').childNodes
@@ -176,10 +221,10 @@ export default {
       this.pulldown = new Pulldown(config)
       this._xscroll.plug(this.pulldown)
       this.pulldown.on('loading', (e) => {
-        this.$emit('pulldown:loading', this.uuid)
+        this.$emit('pulldown:loading', this)
       })
       this.pulldown.on('statuschange', (val) => {
-        this.pulldownStatus = val.newVal
+        this.props_pulldownStatus = val.newVal
       })
     }
 
@@ -194,7 +239,7 @@ export default {
       this.pullup = new Pullup(config)
       this._xscroll.plug(this.pullup)
       this.pullup.on('loading', (e) => {
-        this.$emit('pullup:loading', this.uuid)
+        this.$emit('pullup:loading', this)
       })
       this.pullup.on('statuschange', (val) => {
         this.pullupStatus = val.newVal
@@ -221,44 +266,12 @@ export default {
 
     this._xscroll.render()
   },
-  events: {
-    'pulldown:reset' (uuid) {
-      // set pulldown status to default
-      this.pulldownStatus = 'default'
-      if (uuid === this.uuid) {
-        this.pulldown.reset(() => {
-          // repaint
-          this.reset()
-        })
-      }
-    },
-    'pullup:reset' (uuid) {
-      // set pulldown status to default
-      this.pullupStatus = 'default'
-      if (uuid === this.uuid) {
-        this.pullup.complete()
-        this.reset()
-      }
-    },
-    'pullup:done' (uuid) {
-      if (uuid === this.uuid) {
-        this._xscroll.unplug(this.pullup)
-      }
+  watch:{
+    height:function(newVal, oldVal){
+        this.props_height=newVal;
     },
-    'scroller:reset' (uuid) {
-      if (uuid === this.uuid) {
-        this.reset()
-      }
-    },
-    'pullup:disable' (uuid) {
-      if (uuid === this.uuid) {
-        this.pullup.stop()
-      }
-    },
-    'pullup:enable' (uuid) {
-      if (uuid === this.uuid) {
-        this.pullup.restart()
-      }
+    pulldownStatus:function(newVal, oldVal){
+        this.props_pulldownStatus=newVal;
     }
   },
   beforeDestroy () {
@@ -272,6 +285,13 @@ export default {
     }
     this._xscroll.destroy()
     this._xscroll = null
+  },
+  data(){
+    return {
+      elHeight:"",
+      props_height:"",
+      props_pulldownStatus:"default"
+    }
   }
 }
 </script>

diff --git a/src/components/spinner/index.vue b/src/components/spinner/index.vue
@@ -7,7 +7,7 @@ import Spinner from './spinner'
 const types = ['android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral']
 
 export default {
-  ready () {
+  mounted () {
     Spinner(this.$el, this.type)
   },
   props: {