blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-31 03:22:08 +08:00
Code Issues Projects Releases Wiki Activity

eslint done

Browse Source
This commit is contained in:
zhuxiang 2017-03-08 12:59:44 +08:00
parent 14110f6c90
commit 43e79ccc65
4 changed files with 105 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/examples-docs/tab.md
View File

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

75
packages/lazyload/index.js
View File

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

8
packages/tab/src/tab.vue
View File

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

26
packages/tab/src/tabs.vue
View File

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