Merge branch 'feature/tabs_lazyload' into 'master'
Feature/tabs lazyload review一下 See merge request !9
This commit is contained in:
zhangmin
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,2 @@
|
||||
import Tab from './src/tab';
|
||||
export default Tab;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="zan-tabs-pane" :class="classNames">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tab',
|
||||
props: {
|
||||
// 选项卡头显示文字
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disable: Boolean
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$parent.tabs.push(this);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="zan-tabs">
|
||||
<div class="zan-tabs-nav" :class="classNames">
|
||||
<div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
class="zan-tab"
|
||||
:class="{'zan-tab-active': index == switchActiveTabKey}"
|
||||
ref="tabkey"
|
||||
@click="handleTabClick(index,tab)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-tabs-content"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tabs',
|
||||
props: {
|
||||
// 外部传入的激活的tab标签
|
||||
active: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是默认的line还是card
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
},
|
||||
// nav的wrap的样式
|
||||
navclass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: this.active
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return [`zan-tabs-${this.type}`, this.navclass];
|
||||
},
|
||||
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: offsetWidth,
|
||||
transform: `translate3d(${offsetLeft}, 0px, 0px)`
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(index, el) {
|
||||
if (el.disable) {
|
||||
el.$emit('disable');
|
||||
return;
|
||||
}
|
||||
this.switchActiveTabKey = index;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面载入完成
|
||||
this.$nextTick(() => {
|
||||
// 可以开始触发在computed中关于nav-bar的css动画
|
||||
this.isReady = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
import Tabs from '../tab/src/tabs';
|
||||
|
||||
export default Tabs;
|
||||
@@ -18,6 +18,7 @@
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
@import './tab.css';
|
||||
@import './col.css';
|
||||
@import './row.css';
|
||||
@import './image_preview.css';
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
@component-namespace zan {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
}
|
||||
@b tabs-line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@b tabs-card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
.zan-tabs-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
.zan-tab {
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
&.zan-tab-active {
|
||||
background-color: #666666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@b tabs-nav {
|
||||
display: flex;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
/*float: left*/
|
||||
&::after, &::before {
|
||||
display: table;
|
||||
content: " "
|
||||
}
|
||||
&::after {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@b tab {
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
@b tab-active {
|
||||
color: #FF4444;
|
||||
}
|
||||
@b tabs-pane {
|
||||
display: none;
|
||||
@when select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user