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 | 5 | <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon> |
| 6 | 6 | </div> |
| 7 | 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 | 15 | </li> |
| 10 | 16 | </template> |
| 11 | 17 | <script> |
| 12 | 18 | import Drop from '../select/dropdown.vue'; |
| 13 | 19 | import Icon from '../icon/icon.vue'; |
| 20 | + import { getStyle } from '../../utils/assist'; | |
| 21 | + | |
| 14 | 22 | const prefixCls = 'ivu-menu'; |
| 15 | 23 | |
| 16 | 24 | export default { |
| ... | ... | @@ -30,7 +38,8 @@ |
| 30 | 38 | return { |
| 31 | 39 | prefixCls: prefixCls, |
| 32 | 40 | active: false, |
| 33 | - opened: false | |
| 41 | + opened: false, | |
| 42 | + dropWidth: parseFloat(getStyle(this.$el, 'width')) | |
| 34 | 43 | }; |
| 35 | 44 | }, |
| 36 | 45 | computed: { |
| ... | ... | @@ -49,6 +58,12 @@ |
| 49 | 58 | }, |
| 50 | 59 | accordion () { |
| 51 | 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 | 69 | methods: { |
| ... | ... | @@ -94,6 +109,8 @@ |
| 94 | 109 | opened (val) { |
| 95 | 110 | if (this.mode === 'vertical') return; |
| 96 | 111 | if (val) { |
| 112 | + // set drop a width to fixed when menu has fixed position | |
| 113 | + this.dropWidth = parseFloat(getStyle(this.$el, 'width')); | |
| 97 | 114 | this.$refs.drop.update(); |
| 98 | 115 | } else { |
| 99 | 116 | this.$refs.drop.destroy(); | ... | ... |
src/components/rate/rate.vue
| ... | ... | @@ -43,7 +43,7 @@ |
| 43 | 43 | { |
| 44 | 44 | [`${prefixCls}-disabled`]: this.disabled |
| 45 | 45 | } |
| 46 | - ] | |
| 46 | + ]; | |
| 47 | 47 | } |
| 48 | 48 | }, |
| 49 | 49 | methods: { |
| ... | ... | @@ -61,9 +61,9 @@ |
| 61 | 61 | [`${prefixCls}-star-full`]: full, |
| 62 | 62 | [`${prefixCls}-star-zero`]: !full |
| 63 | 63 | } |
| 64 | - ] | |
| 64 | + ]; | |
| 65 | 65 | }, |
| 66 | - handleMousemove(value, event) { | |
| 66 | + handleMousemove(value) { | |
| 67 | 67 | if (this.disabled) return; |
| 68 | 68 | |
| 69 | 69 | if (this.allowHalf) { |
| ... | ... | @@ -91,7 +91,7 @@ |
| 91 | 91 | // this.currentValue = this.value; |
| 92 | 92 | this.hoverIndex = -1; |
| 93 | 93 | }, |
| 94 | - handleClick (value) { | |
| 94 | + handleClick () { | |
| 95 | 95 | |
| 96 | 96 | } |
| 97 | 97 | } | ... | ... |
test/routers/menu.vue
| 1 | 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 | 49 | </template> |
| 27 | 50 | <script> |
| 28 | 51 | export default { | ... | ... |