Commit 7d0b73845543ecd9c2ef1d7c3379467890b2c5e9
1 parent
5d10cf72
fixed #3484
Showing
5 changed files
with
42 additions
and
15 deletions
Show diff stats
examples/routers/menu.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange"> | 3 | + <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="light" accordion @on-open-change="handleOpenChange"> |
| 4 | <Submenu name="1"> | 4 | <Submenu name="1"> |
| 5 | <template slot="title"> | 5 | <template slot="title"> |
| 6 | <Icon type="ios-analytics"></Icon> | 6 | <Icon type="ios-analytics"></Icon> |
| @@ -20,8 +20,8 @@ | @@ -20,8 +20,8 @@ | ||
| 20 | <Icon type="ios-filing"></Icon> | 20 | <Icon type="ios-filing"></Icon> |
| 21 | Navigation Two | 21 | Navigation Two |
| 22 | </template> | 22 | </template> |
| 23 | - <MenuItem name="2-1">Option 5</MenuItem> | ||
| 24 | - <MenuItem name="2-2">Option 6</MenuItem> | 23 | + <MenuItem name="2-1" to="/button">Option 5</MenuItem> |
| 24 | + <MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem> | ||
| 25 | <Submenu name="3"> | 25 | <Submenu name="3"> |
| 26 | <template slot="title">Submenu</template> | 26 | <template slot="title">Submenu</template> |
| 27 | <MenuItem name="3-1">Option 7</MenuItem> | 27 | <MenuItem name="3-1">Option 7</MenuItem> |
src/components/button/button.vue
| @@ -107,14 +107,7 @@ | @@ -107,14 +107,7 @@ | ||
| 107 | handleClickLink (event) { | 107 | handleClickLink (event) { |
| 108 | this.$emit('click', event); | 108 | this.$emit('click', event); |
| 109 | 109 | ||
| 110 | - if (this.to) { | ||
| 111 | - if (this.target === '_blank') { | ||
| 112 | - return false; | ||
| 113 | - } else { | ||
| 114 | - event.preventDefault(); | ||
| 115 | - this.handleClick(); | ||
| 116 | - } | ||
| 117 | - } | 110 | + this.handleCheckClick(event); |
| 118 | } | 111 | } |
| 119 | }, | 112 | }, |
| 120 | mounted () { | 113 | mounted () { |
src/components/menu/menu-item.vue
| 1 | <template> | 1 | <template> |
| 2 | - <li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li> | 2 | + <a v-if="to" :href="linkUrl" :target="target" :class="classes" @click="handleClickItem" :style="itemStyle"><slot></slot></a> |
| 3 | + <li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle"><slot></slot></li> | ||
| 3 | </template> | 4 | </template> |
| 4 | <script> | 5 | <script> |
| 5 | import Emitter from '../../mixins/emitter'; | 6 | import Emitter from '../../mixins/emitter'; |
| 6 | - import { findComponentUpward } from '../../utils/assist'; | 7 | + import { findComponentUpward, oneOf } from '../../utils/assist'; |
| 7 | const prefixCls = 'ivu-menu'; | 8 | const prefixCls = 'ivu-menu'; |
| 8 | import mixin from './mixin'; | 9 | import mixin from './mixin'; |
| 10 | + import mixinsLink from '../../mixins/link'; | ||
| 9 | 11 | ||
| 10 | export default { | 12 | export default { |
| 11 | name: 'MenuItem', | 13 | name: 'MenuItem', |
| 12 | - mixins: [ Emitter, mixin ], | 14 | + mixins: [ Emitter, mixin, mixinsLink ], |
| 13 | props: { | 15 | props: { |
| 14 | name: { | 16 | name: { |
| 15 | type: [String, Number], | 17 | type: [String, Number], |
| @@ -18,6 +20,20 @@ | @@ -18,6 +20,20 @@ | ||
| 18 | disabled: { | 20 | disabled: { |
| 19 | type: Boolean, | 21 | type: Boolean, |
| 20 | default: false | 22 | default: false |
| 23 | + }, | ||
| 24 | + to: { | ||
| 25 | + type: [Object, String] | ||
| 26 | + }, | ||
| 27 | + replace: { | ||
| 28 | + type: Boolean, | ||
| 29 | + default: false | ||
| 30 | + }, | ||
| 31 | + target: { | ||
| 32 | + type: String, | ||
| 33 | + validator (value) { | ||
| 34 | + return oneOf(value, ['_blank', '_self', '_parent', '_top']); | ||
| 35 | + }, | ||
| 36 | + default: '_self' | ||
| 21 | } | 37 | } |
| 22 | }, | 38 | }, |
| 23 | data () { | 39 | data () { |
| @@ -43,7 +59,7 @@ | @@ -43,7 +59,7 @@ | ||
| 43 | } | 59 | } |
| 44 | }, | 60 | }, |
| 45 | methods: { | 61 | methods: { |
| 46 | - handleClick () { | 62 | + handleClickItem (event) { |
| 47 | if (this.disabled) return; | 63 | if (this.disabled) return; |
| 48 | 64 | ||
| 49 | let parent = findComponentUpward(this, 'Submenu'); | 65 | let parent = findComponentUpward(this, 'Submenu'); |
| @@ -53,6 +69,8 @@ | @@ -53,6 +69,8 @@ | ||
| 53 | } else { | 69 | } else { |
| 54 | this.dispatch('Menu', 'on-menu-item-select', this.name); | 70 | this.dispatch('Menu', 'on-menu-item-select', this.name); |
| 55 | } | 71 | } |
| 72 | + | ||
| 73 | + this.handleCheckClick(event); | ||
| 56 | } | 74 | } |
| 57 | }, | 75 | }, |
| 58 | mounted () { | 76 | mounted () { |
src/mixins/link.js
| @@ -13,6 +13,16 @@ export default { | @@ -13,6 +13,16 @@ export default { | ||
| 13 | } else { | 13 | } else { |
| 14 | window.location.href = this.to; | 14 | window.location.href = this.to; |
| 15 | } | 15 | } |
| 16 | + }, | ||
| 17 | + handleCheckClick (event) { | ||
| 18 | + if (this.to) { | ||
| 19 | + if (this.target === '_blank') { | ||
| 20 | + return false; | ||
| 21 | + } else { | ||
| 22 | + event.preventDefault(); | ||
| 23 | + this.handleClick(); | ||
| 24 | + } | ||
| 25 | + } | ||
| 16 | } | 26 | } |
| 17 | } | 27 | } |
| 18 | }; | 28 | }; |
| 19 | \ No newline at end of file | 29 | \ No newline at end of file |
src/styles/components/menu.less
| @@ -66,6 +66,12 @@ | @@ -66,6 +66,12 @@ | ||
| 66 | cursor: pointer; | 66 | cursor: pointer; |
| 67 | transition: all @transition-time @ease-in-out; | 67 | transition: all @transition-time @ease-in-out; |
| 68 | } | 68 | } |
| 69 | + a&-item{ | ||
| 70 | + color: inherit; | ||
| 71 | + &:hover, &:active{ | ||
| 72 | + color: inherit; | ||
| 73 | + } | ||
| 74 | + } | ||
| 69 | &-item > i{ | 75 | &-item > i{ |
| 70 | margin-right: 6px; | 76 | margin-right: 6px; |
| 71 | } | 77 | } |