tabs almost
This commit is contained in:
zhuxiang
@@ -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,37 @@
|
||||
<template>
|
||||
<div class="zan-tabs-pane" :class="classNames">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tab',
|
||||
props: {
|
||||
// 对应 Tabs 组件的 activeKey
|
||||
tabKey: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
},
|
||||
// 选项卡头显示文字
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
tabPaneClassName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return [
|
||||
{'is-select': this.tabKey == this.$parent.switchActiveTabKey},
|
||||
this.tabPaneClassName
|
||||
];
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$parent.tabCreate(this.tabKey, this.title);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<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 in tabs"
|
||||
class="zan-tab J-tab-key"
|
||||
:class="[{'zan-tab-active': tab.tabKey == switchActiveTabKey}, tabClassName]"
|
||||
:data-key="tab.tabKey"
|
||||
@click="handleTabClick(tab.tabKey)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-tabs-content"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tabs',
|
||||
props: {
|
||||
// 外部传入的激活的tab标签
|
||||
activeTabKey: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是默认的line还是card
|
||||
classType: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
},
|
||||
// nav的wrap的样式
|
||||
tabsClassName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 每个nav里tab的样式
|
||||
tabClassName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: this.activeTabKey
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classNames () {
|
||||
return [ `zan-tabs-${this.classType}`, this.tabsClassName ]
|
||||
},
|
||||
navBarStyle () {
|
||||
if(!this.isReady) return;
|
||||
let tabKey = this.switchActiveTabKey;
|
||||
let selectors = `.J-tab-key[data-key="${tabKey}"]`;
|
||||
let elem = this.$el.querySelector(selectors) || {};
|
||||
let w = `${elem.offsetWidth || 0}px`;
|
||||
let x = `${elem.offsetLeft || 0}px`;
|
||||
return {
|
||||
width: w,
|
||||
transform: `translate3d(${x}, 0px, 0px)`
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabCreate (tabKey, title) {
|
||||
this.tabs.push({
|
||||
tabKey: tabKey,
|
||||
title: title
|
||||
});
|
||||
},
|
||||
handleTabClick(tabKey) {
|
||||
this.switchActiveTabKey = tabKey;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
//页面载入完成
|
||||
this.$nextTick(() => {
|
||||
// 可以开始触发在computed中关于nav-bar的css动画
|
||||
this.isReady = true;
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
import Tabs from '../tab/src/tabs';
|
||||
|
||||
export default Tabs;
|
||||
@@ -19,3 +19,4 @@
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
@import './tab.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