eslint done

docs/examples-docs/tab.md

@@ -28,7 +28,7 @@ export default {
 ```html
 <zan-tabs>
   <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab disable title="选项二" @ondisable="popalert">内容二</zan-tab>
+  <zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>
   <zan-tab title="选项四">内容四</zan-tab>
   <zan-tab title="选项五">内容五</zan-tab>
@@ -48,7 +48,7 @@ export default {
 ### card样式用法
 :::demo card样式用法
 ```html
-<zan-tabs classtype="card">
+<zan-tabs type="card">
   <zan-tab title="选项一">内容一</zan-tab>
   <zan-tab title="选项二">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>
@@ -80,12 +80,12 @@ export default {
 ### 自定义样式用法
 :::demo 自定义样式用法
 ```html
-<zan-tabs active="2" classname="custom-tabwrap">
-    <zan-tab title="选项一" paneclass="custom-pane">内容一</zan-tab>
-    <zan-tab title="选项二" paneclass="custom-pane">内容二</zan-tab>
-    <zan-tab title="选项三" paneclass="custom-pane">内容三</zan-tab>
-    <zan-tab title="选项四" paneclass="custom-pane">内容四</zan-tab>
-    <zan-tab title="选项五" paneclass="custom-pane">内容五</zan-tab>
+<zan-tabs active="2" navclass="custom-tabwrap">
+    <zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
+    <zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
+    <zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
+    <zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
+    <zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
 </zan-tabs>
 <style>
   .page-tab {

packages/lazyload/index.js

@@ -1,84 +1,79 @@
 export default {
-    install: function(Vue,options){
-        options = options || {
-            fade: false,
-            nohori: false
-        }
-        // scroll结束的时候触发scrollend事件
-        var timer = null;
-        var topValue = 0;
-        var bodyEle = document.body;
-
-        var scrollEnd = document.createEvent('HTMLEvents');
-        scrollEnd.initEvent('scrollEnd',true,false)            
-        function enterFrame(){
-            if(bodyEle.scrollTop == topValue){
-                window.cancelAnimationFrame(timer);
-                window.dispatchEvent(scrollEnd)
-            } else {
-                topValue = bodyEle.scrollTop;
-            }
-            requestAnimationFrame(enterFrame);
-        }
-        document.addEventListener('scroll',function(){
-            if(!timer) {
-                timer = window.requestAnimationFrame(enterFrame);
-            }
-        },true)
-
-        //vue指令
-        function update(value){
-            if (!value) {
-                return;
-            }
-            var isFadeIn = this.modifiers.fade || options.fade
-            var isNoHori = this.modifiers.nohori || options.nohori
-            // 用css3来控制过渡效果
-            if(isFadeIn){
-                this.el.style.opacity = 0
-                this.el.style.transition = 'opacity .3s'
-                this.el.style.webkitTransition = 'opacity .3s'
-            }
-            var compute = function(){
-                if (this.el === null) {
-                    return;
-                }
-                var rect = this.el.getBoundingClientRect();
-                var vpWidth = document.head.parentNode.clientWidth
-                var vpHeight = document.head.parentNode.clientHeight
-                var loadImg = function(){
-                    this.el.src = value
-                    this.el.addEventListener('load',onloadEnd)
-                    window.removeEventListener('scrollEnd',compute,true)
-                    window.removeEventListener('resize',compute,true)
-                    
-                }.bind(this)
-                if(this.el.src == value)return
-                if(isNoHori){
-                    if(rect.bottom >=0 && rect.top <= vpHeight){
-                        loadImg()
-                    }
-                }else if(rect.bottom >=0 && rect.top <= vpHeight
-                        && rect.right >= 0 && rect.left <= vpWidth){
-                    loadImg()
-                }
-            }.bind(this)
-            var onload = function(){
-                compute();
-                this.el && this.el.removeEventListener('load',onload)
-                window.addEventListener('scrollEnd',compute,true)
-                window.addEventListener('resize',compute,true)
-            }.bind(this)
-            var onloadEnd = function(){
-                if (this.el === null) {return;}
-                if(isFadeIn){
-                    this.el.style.opacity = 1
-                }
-                this.el.removeEventListener('load',onloadEnd)
-            }.bind(this)
-            // 元素load触发事件
-            this.el.addEventListener('load',onload)
-        }
-        Vue.directive('lazyload',update)
+  install: function(Vue, options) {
+    options = options || { fade: false, nohori: false };
+    // scroll结束的时候触发scrollend事件
+    var timer = null;
+    var topValue = 0;
+    var bodyEle = document.body;
+    var scrollEnd = document.createEvent('HTMLEvents');
+    scrollEnd.initEvent('scrollEnd', true, false);
+    function enterFrame() {
+      if (bodyEle.scrollTop === topValue) {
+        window.cancelAnimationFrame(timer);
+        window.dispatchEvent(scrollEnd);
+      } else {
+        topValue = bodyEle.scrollTop;
+      }
+      window.requestAnimationFrame(enterFrame);
     }
+    document.addEventListener('scroll', function() {
+      if (!timer) {
+        timer = window.requestAnimationFrame(enterFrame);
+      }
+    }, true);
+    // vue指令
+    function update(value) {
+      if (!value) {
+        return;
+      }
+      var isFadeIn = this.modifiers.fade || options.fade;
+      var isNoHori = this.modifiers.nohori || options.nohori;
+        // 用css3来控制过渡效果
+      if (isFadeIn) {
+        this.el.style.opacity = 0;
+        this.el.style.transition = 'opacity .3s';
+        this.el.style.webkitTransition = 'opacity .3s';
+      }
+      var compute = function() {
+        if (this.el === null) {
+          return;
+        }
+        var rect = this.el.getBoundingClientRect();
+        var vpWidth = document.head.parentNode.clientWidth;
+        var vpHeight = document.head.parentNode.clientHeight;
+        var loadImg = function() {
+          this.el.src = value;
+          this.el.addEventListener('load', onloadEnd);
+          window.removeEventListener('scrollEnd', compute, true);
+          window.removeEventListener('resize', compute, true);
+        }.bind(this);
+        if (this.el.src === value) return;
+        if (isNoHori) {
+          if (rect.bottom >= 0 && rect.top <= vpHeight) {
+            loadImg();
+          }
+        } else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
+          loadImg();
+        }
+      }.bind(this);
+      var onload = function() {
+        compute();
+        this.el && this.el.removeEventListener('load', onload);
+        window.addEventListener('scrollEnd', compute, true);
+        window.addEventListener('resize', compute, true);
+      }.bind(this);
+      var onloadEnd = function() {
+        if (this.el === null) {
+          return;
+        }
+        if (isFadeIn) {
+          this.el.style.opacity = 1;
+        }
+        this.el.removeEventListener('load', onloadEnd);
+      }.bind(this);
+        // 元素load触发事件
+      this.el.addEventListener('load', onload);
+    }
+    Vue.directive('lazyload', update);
+  }
 };

packages/tab/src/tab.vue

@@ -13,20 +13,14 @@
         type: String,
         required: true
       },
-      paneclass: {
-        type: String
-      },
       disable: Boolean
     },
     computed: {
       classNames() {
-        return [
-          {'is-select': this.$parent.tabs.indexOf(this) == this.$parent.switchActiveTabKey },
-          this.paneclass
-        ];
+        return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
       }
     },
-    created () {
+    created() {
       this.$parent.tabs.push(this);
     }
   };

packages/tab/src/tabs.vue

@@ -26,12 +26,12 @@
         default: 0
       },
       // 是默认的line还是card
-      classtype: {
+      type: {
         type: String,
         default: 'line'
       },
       // nav的wrap的样式
-      classname: {
+      navclass: {
         type: String,
         default: ''
       }
@@ -44,36 +44,36 @@
       };
     },
     computed: {
-      classNames () {
-        return [ `zan-tabs-${this.classtype}`, this.classname ]
+      classNames() {
+        return [`zan-tabs-${this.type}`, this.navclass];
       },
-      navBarStyle () {
-        if(!this.isReady) return;
-        let tabKey = this.switchActiveTabKey;
-        let elem = this.$refs.tabkey[tabKey];
-        let w = `${elem.offsetWidth || 0}px`;
-        let x = `${elem.offsetLeft || 0}px`;
+      navBarStyle() {
+        if (!this.isReady) return;
+        const tabKey = this.switchActiveTabKey;
+        const elem = this.$refs.tabkey[tabKey];
+        const offsetWidth = `${elem.offsetWidth || 0}px`;
+        const offsetLeft = `${elem.offsetLeft || 0}px`;
         return {
-          width: w,
-          transform: `translate3d(${x}, 0px, 0px)`
-        }
+          width: offsetWidth,
+          transform: `translate3d(${offsetLeft}, 0px, 0px)`
+        };
       }
     },
     methods: {
       handleTabClick(index, el) {
-        if(el.disable) {
-          el.$emit('ondisable');
-          return 
+        if (el.disable) {
+          el.$emit('disable');
+          return;
         }
         this.switchActiveTabKey = index;
       }
     },
-    mounted () {
-      //页面载入完成
+    mounted() {
+      // 页面载入完成
       this.$nextTick(() => {
         // 可以开始触发在computed中关于nav-bar的css动画
         this.isReady = true;
-      })
+      });
     }
   };
 </script>