drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Tabs

Browse source 
support Tabs
This commit is contained in:
梁灏 2017-03-03 13:38:46 +08:00
parent b2d29401f7
commit 30510c3d9e
8 changed files with 98 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGE.md
View file

@ -26,3 +26,5 @@ class 改为了 className
废弃 data，改为 value，使用 v-model，key 更名为 name，不能再 template 的prop 上使用 this
### Circle
改名为 iCircle
### Tabs
废弃 activeKey，改用 value，使用 v-model，key 更名为 name

2
README.md
View file

@ -50,7 +50,7 @@
- [x] Carousel
- [x] Tree
- [ ] Menu
- [ ] Tabs
- [x] Tabs
- [ ] Dropdown
- [ ] Page
- [ ] Breadcrumb

11
src/components/tabs/pane.vue
View file

@ -7,7 +7,7 @@
export default {
name: 'TabPane',
props: {
key: {
name: {
type: String
},
label: {
@ -29,7 +29,8 @@
data () {
return {
prefixCls: prefixCls,
show: true
show: true,
currentName: this.name
};
},
methods: {
@ -38,6 +39,10 @@
}
},
watch: {
name (val) {
this.currentName = val;
this.updateNav();
},
label () {
this.updateNav();
},
@ -48,7 +53,7 @@
this.updateNav();
}
},
ready () {
mounted () {
this.updateNav();
}
};

46
src/components/tabs/tabs.vue
View file

@ -4,12 +4,12 @@
<div :class="[prefixCls + '-nav-container']">
<div :class="[prefixCls + '-nav-wrap']">
<div :class="[prefixCls + '-nav-scroll']">
<div :class="[prefixCls + '-nav']" v-el:nav>
<div :class="[prefixCls + '-nav']" ref="nav">
<div :class="barClasses" :style="barStyle"></div>
<div :class="tabCls(item)" v-for="item in navList" @click="handleChange($index)">
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
{{ item.label }}
<Icon v-if="showClose(item)" type="ios-close-empty" @click.stop="handleRemove($index)"></Icon>
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
</div>
</div>
</div>
@ -26,9 +26,10 @@
const prefixCls = 'ivu-tabs';
export default {
name: 'Tabs',
components: { Icon },
props: {
activeKey: {
value: {
type: [String, Number]
},
type: {
@ -57,7 +58,8 @@
prefixCls: prefixCls,
navList: [],
barWidth: 0,
barOffset: 0
barOffset: 0,
activeKey: this.value
};
},
computed: {
@ -88,7 +90,7 @@
];
},
contentStyle () {
const x = this.navList.findIndex((nav) => nav.key === this.activeKey);
const x = this.navList.findIndex((nav) => nav.name === this.activeKey);
const p = x === 0 ? '0%' : `-${x}00%`;
let style = {};
@ -124,13 +126,13 @@
this.navList.push({
label: pane.label,
icon: pane.icon || '',
key: pane.key || index,
name: pane.currentName || index,
disabled: pane.disabled,
closable: pane.closable
});
if (!pane.key) pane.key = index;
if (!pane.currentName) pane.currentName = index;
if (index === 0) {
if (!this.activeKey) this.activeKey = pane.key || index;
if (!this.activeKey) this.activeKey = pane.currentName || index;
}
});
this.updateStatus();
@ -138,8 +140,8 @@
},
updateBar () {
this.$nextTick(() => {
const index = this.navList.findIndex((nav) => nav.key === this.activeKey);
const prevTabs = this.$els.nav.querySelectorAll(`.${prefixCls}-tab`);
const index = this.navList.findIndex((nav) => nav.name === this.activeKey);
const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`);
const tab = prevTabs[index];
this.barWidth = parseFloat(getStyle(tab, 'width'));
@ -158,29 +160,30 @@
},
updateStatus () {
const tabs = this.getTabs();
tabs.forEach(tab => tab.show = (tab.key === this.activeKey) || this.animated);
tabs.forEach(tab => tab.show = (tab.currentName === this.activeKey) || this.animated);
},
tabCls (item) {
return [
`${prefixCls}-tab`,
{
[`${prefixCls}-tab-disabled`]: item.disabled,
[`${prefixCls}-tab-active`]: item.key === this.activeKey
[`${prefixCls}-tab-active`]: item.name === this.activeKey
}
];
},
handleChange (index) {
const nav = this.navList[index];
if (nav.disabled) return;
this.activeKey = nav.key;
this.$emit('on-click', nav.key);
this.activeKey = nav.name;
this.$emit('input', nav.name);
this.$emit('on-click', nav.name);
},
handleRemove (index) {
const tabs = this.getTabs();
const tab = tabs[index];
tab.$destroy(true);
if (tab.key === this.activeKey) {
if (tab.currentName === this.activeKey) {
const newTabs = this.getTabs();
let activeKey = -1;
@ -189,16 +192,16 @@
const rightNoDisabledTabs = tabs.filter((item, itemIndex) => !item.disabled && itemIndex > index);
if (rightNoDisabledTabs.length) {
activeKey = rightNoDisabledTabs[0].key;
activeKey = rightNoDisabledTabs[0].currentName;
} else if (leftNoDisabledTabs.length) {
activeKey = leftNoDisabledTabs[leftNoDisabledTabs.length - 1].key;
activeKey = leftNoDisabledTabs[leftNoDisabledTabs.length - 1].currentName;
} else {
activeKey = newTabs[0].key;
activeKey = newTabs[0].currentName;
}
}
this.activeKey = activeKey;
}
this.$emit('on-tab-remove', tab.key);
this.$emit('on-tab-remove', tab.currentName);
this.updateNav();
},
showClose (item) {
@ -214,6 +217,9 @@
}
},
watch: {
value (val) {
this.activeKey = val;
},
activeKey () {
this.updateBar();
this.updateStatus();

6
src/index.js
View file

@ -34,7 +34,7 @@ import Rate from './components/rate';
import Steps from './components/steps';
import Switch from './components/switch';
// import Table from './components/table';
// import Tabs from './components/tabs';
import Tabs from './components/tabs';
import Tag from './components/tag';
import Timeline from './components/timeline';
// import TimePicker from './components/time-picker';
@ -100,8 +100,8 @@ const iview = {
Steps,
iSwitch: Switch,
// iTable: Table,
// Tabs: Tabs,
// TabPane: Tabs.Pane,
Tabs: Tabs,
TabPane: Tabs.Pane,
Tag,
Timeline,
TimelineItem: Timeline.Item,

1
test/app.vue
View file

@ -34,6 +34,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/tree">Tree</router-link></li>
<li><router-link to="/rate">Rate</router-link></li>
<li><router-link to="/circle">Circle</router-link></li>
<li><router-link to="/tabs">Tabs</router-link></li>
</ul>
</nav>
<router-view></router-view>

4
test/main.js
View file

@ -100,6 +100,10 @@ const router = new VueRouter({
{
path: '/circle',
component: require('./routers/circle.vue')
},
{
path: '/tabs',
component: require('./routers/tabs.vue')
}
]
});

54
test/routers/tabs.vue
View file

@ -1,14 +1,56 @@
<style>
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
height: 120px;
margin-top: -16px;
}
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
background: #fff;
padding: 16px;
}
.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
border-color: transparent;
}
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
border-color: #fff;
}
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
border-radius: 0;
background: #fff;
}
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
border-top: 1px solid #3399ff;
}
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
content: '';
display: block;
width: 100%;
height: 1px;
background: #3399ff;
position: absolute;
top: 0;
left: 0;
}
</style>
<template>
<Tabs active-key="key1">
<Tab-pane label="标签一" key="key1">标签一的内容</Tab-pane>
<Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
<Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
</Tabs>
<Row :gutter="32">
<i-col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
<Tabs type="card">
<Tab-pane label="标签一">标签一的内容</Tab-pane>
<Tab-pane label="标签二" :closable="true">标签二的内容</Tab-pane>
<Tab-pane label="标签二">标签二的内容</Tab-pane>
<Tab-pane label="标签三">标签三的内容</Tab-pane>
</Tabs>
</i-col>
<i-col span="12" class="demo-tabs-style2">
<Tabs type="card">
<Tab-pane label="标签一">标签一的内容</Tab-pane>
<Tab-pane label="标签二">标签二的内容</Tab-pane>
<Tab-pane label="标签三">标签三的内容</Tab-pane>
</Tabs>
</i-col>
</Row>
</template>
<script>
export default {