blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +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 {

157
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, // scroll结束的时候触发scrollend事件
nohori: false var timer = null;
} var topValue = 0;
// scroll结束的时候触发scrollend事件 var bodyEle = document.body;
var timer = null; var scrollEnd = document.createEvent('HTMLEvents');
var topValue = 0; scrollEnd.initEvent('scrollEnd', true, false);
var bodyEle = document.body; function enterFrame() {
if (bodyEle.scrollTop === topValue) {
var scrollEnd = document.createEvent('HTMLEvents'); window.cancelAnimationFrame(timer);
scrollEnd.initEvent('scrollEnd',true,false) window.dispatchEvent(scrollEnd);
function enterFrame(){ } else {
if(bodyEle.scrollTop == topValue){ topValue = bodyEle.scrollTop;
window.cancelAnimationFrame(timer); }
window.dispatchEvent(scrollEnd) window.requestAnimationFrame(enterFrame);
} 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)
} }
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);
}
}; };

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

@ -13,20 +13,14 @@
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() {
this.$parent.tabs.push(this); this.$parent.tabs.push(this);
} }
}; };

38
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: ''
} }
@ -44,36 +44,36 @@
}; };
}, },
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;
} }
}, },
mounted () { mounted() {
//页面载入完成 // 页面载入完成
this.$nextTick(() => { this.$nextTick(() => {
// 可以开始触发在computed中关于nav-bar的css动画 // 可以开始触发在computed中关于nav-bar的css动画
this.isReady = true; this.isReady = true;
}) });
} }
}; };
</script> </script>