Merge branch 'master' into hostfix/uploader
This commit is contained in:
taiyong
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="zan-tabs-pane" :class="classNames">
|
||||
<div class="zan-tab__pane" :class="classNames">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -17,7 +17,7 @@
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
<template>
|
||||
<div class="zan-tabs">
|
||||
<div class="zan-tabs-nav" :class="classNames">
|
||||
<div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
|
||||
<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}"
|
||||
: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 class="zan-tabs__content"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tabs',
|
||||
|
||||
props: {
|
||||
// 外部传入的激活的tab标签
|
||||
active: {
|
||||
@@ -36,17 +37,26 @@
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: this.active
|
||||
switchActiveTabKey: +this.active
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
active(val) {
|
||||
this.switchActiveTabKey = +val;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classNames() {
|
||||
return [`zan-tabs-${this.type}`, this.navclass];
|
||||
return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
|
||||
},
|
||||
|
||||
navBarStyle() {
|
||||
if (!this.isReady) return;
|
||||
const tabKey = this.switchActiveTabKey;
|
||||
@@ -59,6 +69,7 @@
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTabClick(index, el) {
|
||||
if (el.disable) {
|
||||
@@ -68,6 +79,7 @@
|
||||
this.switchActiveTabKey = index;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 页面载入完成
|
||||
this.$nextTick(() => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Utils from './utils.js';
|
||||
import Utils from 'src/utils/scroll.js';
|
||||
|
||||
const CONTEXT = '@@Waterfall';
|
||||
const OFFSET = 300;
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
export default {
|
||||
debounce(func, wait, immediate) {
|
||||
var timeout, args, context, timestamp, result;
|
||||
return function() {
|
||||
context = this;
|
||||
args = arguments;
|
||||
timestamp = new Date();
|
||||
var later = function() {
|
||||
var last = (new Date()) - timestamp;
|
||||
if (last < wait) {
|
||||
timeout = setTimeout(later, wait - last);
|
||||
} else {
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
}
|
||||
};
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(later, wait);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
},
|
||||
|
||||
// 找到最近的触发滚动事件的元素
|
||||
getScrollEventTarget(element) {
|
||||
var currentNode = element;
|
||||
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
||||
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
|
||||
var overflowY = this.getComputedStyle(currentNode).overflowY;
|
||||
if (overflowY === 'scroll' || overflowY === 'auto') {
|
||||
return currentNode;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return window;
|
||||
},
|
||||
|
||||
// 判断元素是否被加入到页面节点内
|
||||
isAttached(element) {
|
||||
var currentNode = element.parentNode;
|
||||
while (currentNode) {
|
||||
if (currentNode.tagName === 'HTML') {
|
||||
return true;
|
||||
}
|
||||
if (currentNode.nodeType === 11) {
|
||||
return false;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 获取滚动高度
|
||||
getScrollTop(element) {
|
||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
||||
},
|
||||
|
||||
// 获取元素距离顶部高度
|
||||
getElementTop(element) {
|
||||
if (element === window) {
|
||||
return this.getScrollTop(window);
|
||||
}
|
||||
return element.getBoundingClientRect().top + this.getScrollTop(window);
|
||||
},
|
||||
|
||||
getVisibleHeight(element) {
|
||||
if (element === window) {
|
||||
return element.innerHeight;
|
||||
}
|
||||
|
||||
return element.getBoundingClientRect().height;
|
||||
},
|
||||
|
||||
getComputedStyle: document.defaultView.getComputedStyle.bind(document.defaultView)
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.0.41",
|
||||
"version": "0.0.42",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
||||
@@ -2,86 +2,109 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
@b tabs {
|
||||
position: relative;
|
||||
|
||||
@m col-2 {
|
||||
.zan-tab {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@b tabs-line {
|
||||
|
||||
@m col-3 {
|
||||
.zan-tab {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-4 {
|
||||
.zan-tab {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-5 {
|
||||
.zan-tab {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@e nav {
|
||||
overflow: hidden;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
|
||||
@m line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@b tabs-card {
|
||||
}
|
||||
|
||||
@m 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-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;
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
@e 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 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;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
@m active {
|
||||
color: #FF4444;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
||||
@e pane {
|
||||
display: none;
|
||||
|
||||
@m select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user