From 30510c3d9e7850fb52691a6f9fdc5a7592002591 Mon Sep 17 00:00:00 2001 From: 梁灏 Date: Fri, 3 Mar 2017 13:38:46 +0800 Subject: [PATCH] support Tabs --- CHANGE.md | 4 +++- README.md | 2 +- src/components/tabs/pane.vue | 11 ++++++++--- src/components/tabs/tabs.vue | 46 ++++++++++++++++++++++++++-------------------- src/index.js | 6 +++--- test/app.vue | 1 + test/main.js | 4 ++++ test/routers/tabs.vue | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++---------- 8 files changed, 98 insertions(+), 38 deletions(-) diff --git a/CHANGE.md b/CHANGE.md index cf1065d..0c2bb39 100644 --- a/CHANGE.md +++ b/CHANGE.md @@ -25,4 +25,6 @@ class 改为了 className ### Tree 废弃 data，改为 value，使用 v-model，key 更名为 name，不能再 template 的prop 上使用 this ### Circle -改名为 iCircle \ No newline at end of file +改名为 iCircle +### Tabs +废弃 activeKey，改用 value，使用 v-model，key 更名为 name \ No newline at end of file diff --git a/README.md b/README.md index 9962baf..3d60c39 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ - [x] Carousel - [x] Tree - [ ] Menu -- [ ] Tabs +- [x] Tabs - [ ] Dropdown - [ ] Page - [ ] Breadcrumb diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue index acc86c1..07f4c82 100644 --- a/src/components/tabs/pane.vue +++ b/src/components/tabs/pane.vue @@ -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(); } }; diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue index 7e085d8..67a1ee1 100644 --- a/src/components/tabs/tabs.vue +++ b/src/components/tabs/tabs.vue @@ -4,12 +4,12 @@
-
+
-
+
{{ item.label }} - +
@@ -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(); diff --git a/src/index.js b/src/index.js index 5a5f475..f2331a7 100644 --- a/src/index.js +++ b/src/index.js @@ -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, diff --git a/test/app.vue b/test/app.vue index 22a1a62..2a1c202 100644 --- a/test/app.vue +++ b/test/app.vue @@ -34,6 +34,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
  • Tree
  • Rate
  • Circle
    • +
  • Tabs
    • diff --git a/test/main.js b/test/main.js index f9a9ca2..09c833d 100644 --- a/test/main.js +++ b/test/main.js @@ -100,6 +100,10 @@ const router = new VueRouter({ { path: '/circle', component: require('./routers/circle.vue') + }, + { + path: '/tabs', + component: require('./routers/tabs.vue') } ] }); diff --git a/test/routers/tabs.vue b/test/routers/tabs.vue index 13bbac5..a6bd5c7 100644 --- a/test/routers/tabs.vue +++ b/test/routers/tabs.vue @@ -1,14 +1,56 @@ +