Commit fa0241a53510f57866c36d413b50bd301ebef9a9
1 parent
49d380cf
fixed #212
fixed #212
Showing
3 changed files
with
70 additions
and
30 deletions
Show diff stats
src/components/menu/submenu.vue
| @@ -5,12 +5,20 @@ | @@ -5,12 +5,20 @@ | ||
| 5 | <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon> | 5 | <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon> |
| 6 | </div> | 6 | </div> |
| 7 | <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul> | 7 | <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul> |
| 8 | - <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop> | 8 | + <Drop |
| 9 | + v-else | ||
| 10 | + v-show="opened" | ||
| 11 | + placement="bottom" | ||
| 12 | + transition="slide-up" | ||
| 13 | + v-ref:drop | ||
| 14 | + :style="dropStyle"><slot></slot></Drop> | ||
| 9 | </li> | 15 | </li> |
| 10 | </template> | 16 | </template> |
| 11 | <script> | 17 | <script> |
| 12 | import Drop from '../select/dropdown.vue'; | 18 | import Drop from '../select/dropdown.vue'; |
| 13 | import Icon from '../icon/icon.vue'; | 19 | import Icon from '../icon/icon.vue'; |
| 20 | + import { getStyle } from '../../utils/assist'; | ||
| 21 | + | ||
| 14 | const prefixCls = 'ivu-menu'; | 22 | const prefixCls = 'ivu-menu'; |
| 15 | 23 | ||
| 16 | export default { | 24 | export default { |
| @@ -30,7 +38,8 @@ | @@ -30,7 +38,8 @@ | ||
| 30 | return { | 38 | return { |
| 31 | prefixCls: prefixCls, | 39 | prefixCls: prefixCls, |
| 32 | active: false, | 40 | active: false, |
| 33 | - opened: false | 41 | + opened: false, |
| 42 | + dropWidth: parseFloat(getStyle(this.$el, 'width')) | ||
| 34 | }; | 43 | }; |
| 35 | }, | 44 | }, |
| 36 | computed: { | 45 | computed: { |
| @@ -49,6 +58,12 @@ | @@ -49,6 +58,12 @@ | ||
| 49 | }, | 58 | }, |
| 50 | accordion () { | 59 | accordion () { |
| 51 | return this.$parent.accordion; | 60 | return this.$parent.accordion; |
| 61 | + }, | ||
| 62 | + dropStyle () { | ||
| 63 | + let style = {}; | ||
| 64 | + | ||
| 65 | + if (this.dropWidth) style.minWidth = `${this.dropWidth}px`; | ||
| 66 | + return style; | ||
| 52 | } | 67 | } |
| 53 | }, | 68 | }, |
| 54 | methods: { | 69 | methods: { |
| @@ -94,6 +109,8 @@ | @@ -94,6 +109,8 @@ | ||
| 94 | opened (val) { | 109 | opened (val) { |
| 95 | if (this.mode === 'vertical') return; | 110 | if (this.mode === 'vertical') return; |
| 96 | if (val) { | 111 | if (val) { |
| 112 | + // set drop a width to fixed when menu has fixed position | ||
| 113 | + this.dropWidth = parseFloat(getStyle(this.$el, 'width')); | ||
| 97 | this.$refs.drop.update(); | 114 | this.$refs.drop.update(); |
| 98 | } else { | 115 | } else { |
| 99 | this.$refs.drop.destroy(); | 116 | this.$refs.drop.destroy(); |
src/components/rate/rate.vue
| @@ -43,7 +43,7 @@ | @@ -43,7 +43,7 @@ | ||
| 43 | { | 43 | { |
| 44 | [`${prefixCls}-disabled`]: this.disabled | 44 | [`${prefixCls}-disabled`]: this.disabled |
| 45 | } | 45 | } |
| 46 | - ] | 46 | + ]; |
| 47 | } | 47 | } |
| 48 | }, | 48 | }, |
| 49 | methods: { | 49 | methods: { |
| @@ -61,9 +61,9 @@ | @@ -61,9 +61,9 @@ | ||
| 61 | [`${prefixCls}-star-full`]: full, | 61 | [`${prefixCls}-star-full`]: full, |
| 62 | [`${prefixCls}-star-zero`]: !full | 62 | [`${prefixCls}-star-zero`]: !full |
| 63 | } | 63 | } |
| 64 | - ] | 64 | + ]; |
| 65 | }, | 65 | }, |
| 66 | - handleMousemove(value, event) { | 66 | + handleMousemove(value) { |
| 67 | if (this.disabled) return; | 67 | if (this.disabled) return; |
| 68 | 68 | ||
| 69 | if (this.allowHalf) { | 69 | if (this.allowHalf) { |
| @@ -91,7 +91,7 @@ | @@ -91,7 +91,7 @@ | ||
| 91 | // this.currentValue = this.value; | 91 | // this.currentValue = this.value; |
| 92 | this.hoverIndex = -1; | 92 | this.hoverIndex = -1; |
| 93 | }, | 93 | }, |
| 94 | - handleClick (value) { | 94 | + handleClick () { |
| 95 | 95 | ||
| 96 | } | 96 | } |
| 97 | } | 97 | } |
test/routers/menu.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Menu mode="horizontal" theme="primary" active-key="1"> | ||
| 3 | - <Submenu key="1"> | ||
| 4 | - <template slot="title"> | ||
| 5 | - <Icon type="soup-can-outline"></Icon> | ||
| 6 | - 数据管理 | ||
| 7 | - </template> | ||
| 8 | - <Menu-group title="使用"> | ||
| 9 | - <Menu-item key="1-1">新增和启动新增和启动</Menu-item> | ||
| 10 | - <Menu-item key="1-2">活跃分析</Menu-item> | ||
| 11 | - <Menu-item key="1-3">时段分析</Menu-item> | ||
| 12 | - </Menu-group> | ||
| 13 | - <Menu-group title="留存"> | ||
| 14 | - <Menu-item key="1-4">用户留存</Menu-item> | ||
| 15 | - <Menu-item key="1-5">流失用户</Menu-item> | ||
| 16 | - </Menu-group> | ||
| 17 | - </Submenu> | ||
| 18 | - </Menu> | ||
| 19 | - <br> | ||
| 20 | - <p>切换主题</p> | ||
| 21 | - <Radio-group :model.sync="theme1"> | ||
| 22 | - <Radio value="light"></Radio> | ||
| 23 | - <Radio value="dark"></Radio> | ||
| 24 | - <Radio value="primary"></Radio> | ||
| 25 | - </Radio-group> | 2 | + <div style="margin: 50px;position:relative;top: 0;left: 0;"> |
| 3 | + <Menu mode="horizontal" :theme="theme1" active-key="1"> | ||
| 4 | + <Menu-item key="1"> | ||
| 5 | + <Icon type="ios-paper"></Icon> | ||
| 6 | + 内容管理 | ||
| 7 | + </Menu-item> | ||
| 8 | + <Menu-item key="2"> | ||
| 9 | + <Icon type="ios-people"></Icon> | ||
| 10 | + 用户管理 | ||
| 11 | + </Menu-item> | ||
| 12 | + <Menu-item key="1"> | ||
| 13 | + <Icon type="ios-paper"></Icon> | ||
| 14 | + 内容管理 | ||
| 15 | + </Menu-item> | ||
| 16 | + <Menu-item key="2"> | ||
| 17 | + <Icon type="ios-people"></Icon> | ||
| 18 | + 用户管理 | ||
| 19 | + </Menu-item> | ||
| 20 | + <Menu-item key="1"> | ||
| 21 | + <Icon type="ios-paper"></Icon> | ||
| 22 | + 内容管理 | ||
| 23 | + </Menu-item> | ||
| 24 | + <Menu-item key="2"> | ||
| 25 | + <Icon type="ios-people"></Icon> | ||
| 26 | + 用户管理 | ||
| 27 | + </Menu-item> | ||
| 28 | + <Submenu key="3"> | ||
| 29 | + <template slot="title"> | ||
| 30 | + <Icon type="stats-bars"></Icon> | ||
| 31 | + 统计分析 | ||
| 32 | + </template> | ||
| 33 | + <Menu-group title="使用"> | ||
| 34 | + <Menu-item key="3-1">新增和新</Menu-item> | ||
| 35 | + <Menu-item key="3-2">活跃分析</Menu-item> | ||
| 36 | + <Menu-item key="3-3">时段分析</Menu-item> | ||
| 37 | + </Menu-group> | ||
| 38 | + <Menu-group title="留存"> | ||
| 39 | + <Menu-item key="3-4">用户留存</Menu-item> | ||
| 40 | + <Menu-item key="3-5">流失用户</Menu-item> | ||
| 41 | + </Menu-group> | ||
| 42 | + </Submenu> | ||
| 43 | + <Menu-item key="4"> | ||
| 44 | + <Icon type="settings"></Icon> | ||
| 45 | + 综合设置 | ||
| 46 | + </Menu-item> | ||
| 47 | + </Menu> | ||
| 48 | + </div> | ||
| 26 | </template> | 49 | </template> |
| 27 | <script> | 50 | <script> |
| 28 | export default { | 51 | export default { |