From 153220215f834ae13542d87e2492a548ba63a737 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Fri, 29 Jul 2016 16:41:14 +0800 Subject: [PATCH] update menu, tag, button, progress --- bin/build-entry.js | 12 +- examples/docs/menu.md | 140 ++++++++++-------- examples/docs/tag.md | 3 +- packages/menu/src/menu-item.vue | 32 ++-- packages/menu/src/menu.vue | 38 +++-- packages/menu/src/submenu.vue | 27 ++-- packages/tag/src/tag.vue | 20 +-- .../theme-default/src/common/transition.css | 24 +-- packages/theme-default/src/menu.css | 34 ++--- src/index.js | 14 +- 10 files changed, 181 insertions(+), 163 deletions(-) diff --git a/bin/build-entry.js b/bin/build-entry.js index 4cbd41f8d..9f2544b2f 100644 --- a/bin/build-entry.js +++ b/bin/build-entry.js @@ -14,13 +14,13 @@ const install = function(Vue) { {{install}} - Vue.use(Loading); + // Vue.use(Loading); - Vue.prototype.$msgbox = MessageBox; - Vue.prototype.$alert = MessageBox.alert; - Vue.prototype.$confirm = MessageBox.confirm; - Vue.prototype.$prompt = MessageBox.prompt; - Vue.prototype.$notify = Notification; + // Vue.prototype.$msgbox = MessageBox; + // Vue.prototype.$alert = MessageBox.alert; + // Vue.prototype.$confirm = MessageBox.confirm; + // Vue.prototype.$prompt = MessageBox.prompt; + // Vue.prototype.$notify = Notification; }; // auto install diff --git a/examples/docs/menu.md b/examples/docs/menu.md index 937d5286f..e24991f0f 100644 --- a/examples/docs/menu.md +++ b/examples/docs/menu.md @@ -113,10 +113,10 @@

Element

- - 处理中心 - 我的工作台 - 订单管理 + + 处理中心 + 我的工作台 + 订单管理
@@ -133,10 +133,10 @@ ```html

Element

- - 处理中心 - 我的工作台 - 订单管理 + + 处理中心 + 我的工作台 + 订单管理
@@ -153,10 +153,10 @@

Element

- - 处理中心 - 我的工作台 - 订单管理 + + 处理中心 + 我的工作台 + 订单管理
@@ -173,10 +173,10 @@ ```html

Element

- - 处理中心 - 我的工作台 - 订单管理 + + 处理中心 + 我的工作台 + 订单管理
@@ -195,19 +195,19 @@

Element

- - 导航一 - + + 导航一 + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 - + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3
@@ -216,19 +216,19 @@ ```html

Element

- - 导航一 - + + 导航一 + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 - + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3
@@ -237,31 +237,31 @@

Element

- - 导航一 - + + 导航一 + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 - + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 - + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 - + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3
@@ -270,19 +270,31 @@ ```html

Element

- - 导航一 - + + 导航一 + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 - + - 选项1 - 选项2 - 选项3 + 选项1 + 选项2 + 选项3 + + + + 选项1 + 选项2 + 选项3 + + + + 选项1 + 选项2 + 选项3
diff --git a/examples/docs/tag.md b/examples/docs/tag.md index c4e63e728..4e699b893 100644 --- a/examples/docs/tag.md +++ b/examples/docs/tag.md @@ -14,7 +14,7 @@ }, methods: { handleClose(tag) { - this.tags.$remove(tag); + this.tags.splice(this.tags.indexOf(tag), 1); } } } @@ -55,6 +55,7 @@ v-for="tag in tags" :closable="true" :type="tag.type" + :key="tag" @close="handleClose(tag)" > {{tag.name}} diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue index abd374ff0..930a2d9f5 100644 --- a/packages/menu/src/menu-item.vue +++ b/packages/menu/src/menu-item.vue @@ -9,32 +9,32 @@ mixins: [emitter], props: { - key: { + index: { type: String, required: true + }, + disabled: { + type: Boolean, + required: false } }, - data() { - return { - active: false - }; - }, computed: { - keyPath() { - return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key]; + indexPath() { + return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index]; + }, + activeIndex() { + return this.$parent.activeIndex; + }, + active() { + return this.index === this.activeIndex; } }, methods: { handleClick() { if (!this.active) { - this.dispatch('menu', 'select-key', [this.key, this.keyPath]); + this.dispatch('menu', 'select-key', [this.index, this.indexPath]); } } - }, - events: { - 'select-key': function(key) { - this.active = key === this.key; - } } }; @@ -47,6 +47,8 @@ 'is-disabled': disabled }"> - + + + diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue index e3b81b82d..02fbaac4d 100644 --- a/packages/menu/src/menu.vue +++ b/packages/menu/src/menu.vue @@ -23,10 +23,11 @@ type: String, default: '' }, - activeKey: { - type: String + defaultActive: { + type: String, + default: '' }, - openedKeys: { + defaultOpeneds: { type: Array, default() { return []; @@ -39,35 +40,42 @@ uniqueOpend: Boolean, router: Boolean }, - ready() { - this.broadcast('menu-item', 'select-key', this.activeKey); - this.broadcast('submenu', 'open-menu', this.openedKeys); + data() { + return { + activeIndex: this.defaultActive, + openedMenus: this.defaultOpeneds + }; }, - events: { - 'expand-menu': function(key, keyPath) { - this.openedKeys.push(key); + methods: { + handleMenuExpand(key, keyPath) { + this.openedMenus.push(key); if (this.uniqueOpend) { this.broadcast('submenu', 'close-menu', keyPath); - this.openedKeys = this.openedKeys.filter((key) => { + this.openedMenus = this.openedMenus.filter((key) => { return keyPath.indexOf(key) !== -1; }); } this.$emit('open', key, keyPath); }, - 'collapse-menu': function(key, keyPath) { - this.openedKeys.$remove(key); + handleMenuCollapse(key, keyPath) { + this.openedMenus.splice(this.openedMenus.indexOf(key), 1); this.$emit('close', key, keyPath); }, - 'select-key': function(key, keyPath) { - this.activeKey = key; - this.broadcast('menu-item', 'select-key', key); + handleSelect(key, keyPath) { + this.activeIndex = key; this.$emit('select', key, keyPath); if (this.router) { this.$route.router.go(key); } } + }, + mounted() { + this.broadcast('submenu', 'open-menu', this.openedMenus); + this.$on('expand-menu', this.handleMenuExpand); + this.$on('collapse-menu', this.handleMenuCollapse); + this.$on('select-key', this.handleSelect); } }; diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue index 0e4e9c4b9..7c53c7f97 100644 --- a/packages/menu/src/submenu.vue +++ b/packages/menu/src/submenu.vue @@ -9,7 +9,7 @@ mixins: [emitter], props: { - key: { + index: { type: String, required: true } @@ -20,32 +20,35 @@ }; }, computed: { - keyPath() { - return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key]; + indexPath() { + return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index]; + }, + activeIndex() { + return this.$parent.activeIndex; } }, methods: { handleClick() { if (!this.opened) { - this.dispatch('menu', 'expand-menu', [this.key, this.keyPath]); + this.dispatch('menu', 'expand-menu', [this.index, this.indexPath]); this.opened = true; } else { - this.dispatch('menu', 'collapse-menu', [this.key, this.keyPath]); + this.dispatch('menu', 'collapse-menu', [this.index, this.indexPath]); this.opened = false; } } }, - events: { - 'close-menu': function(openedKeys) { - if (openedKeys && openedKeys.indexOf(this.key) === -1) { + mounted() { + this.$on('close-menu', (openedIndexs) => { + if (openedIndexs && openedIndexs.indexOf(this.index) === -1) { this.opened = false; } - }, - 'open-menu': function(keysArray) { - if (keysArray && keysArray.indexOf(this.key) !== -1) { + }); + this.$on('open-menu', (IndexsArray) => { + if (IndexsArray && IndexsArray.indexOf(this.index) !== -1) { this.opened = true; } - } + }); } }; diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue index 28b2c6872..1852d4c3b 100644 --- a/packages/tag/src/tag.vue +++ b/packages/tag/src/tag.vue @@ -1,14 +1,14 @@