drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

publish 0.9.10-rc-2

Browse source 
publish 0.9.10-rc-2
This commit is contained in:
梁灏 2016-12-08 18:33:04 +08:00
parent fd5cd82376
commit fc3ffbe08d
6 changed files with 95 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "0.9.10-rc-1", "version": "0.9.10-rc-2",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",

6
src/components/menu/menu-group.vue
View file

@ -19,12 +19,6 @@
return { return {
prefixCls: prefixCls prefixCls: prefixCls
} }
},
computed: {
},
methods: {
} }
} }
</script> </script>

28
src/components/menu/menu.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<ul :class="classes"><slot></slot></ul> <ul :class="classes" :style="styles"><slot></slot></ul>
</template> </template>
<script> <script>
import { oneOf } from '../../utils/assist'; import { oneOf } from '../../utils/assist';
@ -32,11 +32,10 @@
accordion: { accordion: {
type: Boolean, type: Boolean,
default: false default: false
}
}, },
data () { width: {
return { type: String,
default: '240px'
} }
}, },
computed: { computed: {
@ -51,12 +50,21 @@
[`${prefixCls}-${this.mode}`]: this.mode [`${prefixCls}-${this.mode}`]: this.mode
} }
] ]
},
styles () {
let style = {};
if (this.mode === 'vertical') style.width = this.width;
return style;
} }
}, },
methods: { methods: {
updateActiveKey () { updateActiveKey () {
this.$children.forEach((item, index) => { this.$children.forEach((item, index) => {
if (!this.activeKey && index === 0) this.activeKey = item.key; if (!this.activeKey && index === 0) {
this.activeKey = -1;
}
if (item.$options.name === 'Submenu') { if (item.$options.name === 'Submenu') {
item.active = false; item.active = false;
@ -95,10 +103,18 @@
} else { } else {
this.openKeys.push(key); this.openKeys.push(key);
} }
},
updateOpened () {
this.$children.forEach(item => {
if (item.$options.name === 'Submenu') {
if (this.openKeys.indexOf(item.key) > -1) item.opened = true;
}
})
} }
}, },
compiled () { compiled () {
this.updateActiveKey(); this.updateActiveKey();
this.updateOpened();
}, },
events: { events: {
'on-menu-item-select' (key) { 'on-menu-item-select' (key) {

2
src/styles/common/article.less
View file

@ -41,7 +41,7 @@
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
} }
ul ul, ol ul{ ul ul:not([class^="ivu-"]), ol ul:not([class^="ivu-"]){
list-style-type: circle; list-style-type: circle;
} }

29
src/styles/components/menu.less
View file

@ -29,7 +29,6 @@
} }
} }
&-vertical{ &-vertical{
width: 240px;
&.@{menu-prefix-cls}-light{ &.@{menu-prefix-cls}-light{
&:after{ &:after{
content: ''; content: '';
@ -125,8 +124,13 @@
padding-left: 8px; padding-left: 8px;
font-size: @font-size-small; font-size: @font-size-small;
color: @legend-color; color: @legend-color;
height: 30px; height: 48px;
line-height: 30px; line-height: 48px;
}
& > ul{
padding: 0 !important;
list-style: none !important;
} }
} }
@ -183,9 +187,15 @@
&-dark&-vertical &-item, &-dark&-vertical &-submenu-title{ &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
color: @subsidiary-color; color: @subsidiary-color;
&-active:not(.@{menu-prefix-cls}-submenu), &:hover{ &-active:not(.@{menu-prefix-cls}-submenu),
&-active:not(.@{menu-prefix-cls}-submenu):hover
{
background: @menu-dark-active-bg; background: @menu-dark-active-bg;
} }
&:hover{
color: #fff;
background: @title-color;
}
&-active:not(.@{menu-prefix-cls}-submenu){ &-active:not(.@{menu-prefix-cls}-submenu){
color: @primary-color; color: @primary-color;
border-right: 2px solid @primary-color; border-right: 2px solid @primary-color;
@ -194,16 +204,23 @@
&-dark&-vertical &-submenu &-item{ &-dark&-vertical &-submenu &-item{
&:hover{ &:hover{
color: #fff; color: #fff;
background: transparent !important;
} }
&-active{ &-active,&-active:hover{
border-right: none; border-right: none;
color: #fff; color: #fff;
background: @primary-color; background: @primary-color !important;
} }
} }
&-dark&-vertical &-item-active &-submenu-title{
color: #fff;
}
&-dark&-vertical &-opened{ &-dark&-vertical &-opened{
background: @menu-dark-active-bg; background: @menu-dark-active-bg;
.@{menu-prefix-cls}-submenu-title{
background: @title-color;
}
} }
} }
.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);

157
test/routers/menu.vue
View file

@ -1,136 +1,55 @@
<template> <template>
<div> <Row>
<Menu mode="horizontal" :theme="theme" active-key="1"> <i-col span="8">
<Menu-item key="1"> <Menu :theme="theme2">
<Icon type="ionic"></Icon><span>导航一</span> <Submenu key="1">
</Menu-item> <template slot="title">
<Menu-item key="2">导航二</Menu-item> <Icon type="ios-paper"></Icon>
内容管理
</template>
<Menu-item key="1-1">文章管理</Menu-item>
<Menu-item key="1-2">评论管理</Menu-item>
<Menu-item key="1-3">举报管理</Menu-item>
</Submenu>
<Submenu key="2">
<template slot="title">
<Icon type="ios-people"></Icon>
用户管理
</template>
<Menu-item key="2-1">新增用户</Menu-item>
<Menu-item key="2-2">活跃用户</Menu-item>
</Submenu>
<Submenu key="3"> <Submenu key="3">
<template slot="title"><Icon type="ionic"></Icon>导航三</template> <template slot="title">
<Menu-group title="集合1"> <Icon type="stats-bars"></Icon>
<Menu-item key="3-1">导航三 - 一</Menu-item> 统计分析
<Menu-item key="3-2">导航三 - 二</Menu-item> </template>
<Menu-group title="使用">
<Menu-item key="3-1">新增和启动</Menu-item>
<Menu-item key="3-2">活跃分析</Menu-item>
<Menu-item key="3-3">时段分析</Menu-item>
</Menu-group> </Menu-group>
<Menu-group title="集合2"> <Menu-group title="留存">
<Menu-item key="3-3">导航三 - 三</Menu-item> <Menu-item key="3-4">用户留存</Menu-item>
<Menu-item key="3-4">导航三 - 四</Menu-item> <Menu-item key="3-5">流失用户</Menu-item>
</Menu-group> </Menu-group>
</Submenu> </Submenu>
<Menu-item key="4">导航四</Menu-item>
</Menu> </Menu>
<br><br> </i-col>
<Radio-group :model.sync="theme">
</Row>
<br>
<p>切换主题</p>
<Radio-group :model.sync="theme2">
<Radio value="light"></Radio> <Radio value="light"></Radio>
<Radio value="dark"></Radio> <Radio value="dark"></Radio>
<Radio value="primary"></Radio>
</Radio-group> </Radio-group>
<br><br>
<Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change">
<Menu-item key="1">
<Icon type="ionic"></Icon>
<span>导航一</span>
</Menu-item>
<Menu-group title="集合1">
<Menu-item key="2">
<Icon type="ionic"></Icon>
导航二
</Menu-item>
<Menu-item key="3">导航三</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="4">导航四</Menu-item>
<Menu-item key="5">导航五</Menu-item>
</Menu-group>
<Submenu key="6">
<template slot="title"><Icon type="ionic"></Icon>导航六</template>
<Menu-group title="集合1">
<Menu-item key="3-1">导航三 - 一</Menu-item>
<Menu-item key="3-2">导航三 - 二</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="3-3">导航三 - 三</Menu-item>
<Menu-item key="3-4">导航三 - 四</Menu-item>
</Menu-group>
</Submenu>
<Submenu key="7">
<template slot="title"><Icon type="ionic"></Icon>导航七</template>
<Menu-group title="集合1">
<Menu-item key="7-1">导航三 - 一</Menu-item>
<Menu-item key="7-2">导航三 - 二</Menu-item>
</Menu-group>
<Menu-group title="集合2">
<Menu-item key="7-3">导航三 - 三</Menu-item>
<Menu-item key="7-4">导航三 - 四</Menu-item>
</Menu-group>
</Submenu>
</Menu>
<!--<Menu :mode="mode" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
<!--<span>导航一</span>-->
<!--</Menu-item>-->
<!--<Menu-item key="2">导航二</Menu-item>-->
<!--<Submenu key="3">-->
<!--<template slot="title"><Icon type="ionic"></Icon><span>导航三</span></template>-->
<!--<Menu-group title="集合1">-->
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
<!--</Menu-group>-->
<!--<Menu-group title="集合2">-->
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
<!--<Menu-item key="3-4">导航三 - 四</Menu-item>-->
<!--</Menu-group>-->
<!--</Submenu>-->
<!--<Menu-item key="4">导航四</Menu-item>-->
<!--</Menu>-->
<!--<br><br>-->
<!--<Menu mode="horizontal" theme="dark" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
<!--<span>导航一</span>-->
<!--</Menu-item>-->
<!--<Menu-item key="2">导航二</Menu-item>-->
<!--<Submenu key="3">-->
<!--<span slot="title">导航三</span>-->
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
<!--</Submenu>-->
<!--<Menu-item key="4">导航四</Menu-item>-->
<!--</Menu>-->
<!--<br><br>-->
<!--<Menu mode="horizontal" theme="primary" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
<!--<span>导航一</span>-->
<!--</Menu-item>-->
<!--<Menu-item key="2">导航二</Menu-item>-->
<!--<Submenu key="3">-->
<!--<span slot="title">导航三</span>-->
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
<!--</Submenu>-->
<!--<Menu-item key="4">导航四</Menu-item>-->
<!--</Menu>-->
</div>
</template> </template>
<script> <script>
export default { export default {
props: {},
data () { data () {
return { return {
mode: 'vertical', theme2: 'light'
theme: 'dark'
}
},
computed: {},
methods: {
toggleMode () {
this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
},
change (d) {
console.log(d)
} }
} }
} }