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 @@
-
-
-
-
+
+
+
+
+
+