drip-public/iview
6
1
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

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

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

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

@ -1,5 +1,5 @@
<template>
<ul :class="classes"><slot></slot></ul>
<ul :class="classes" :style="styles"><slot></slot></ul>
</template>
<script>
import { oneOf } from '../../utils/assist';
@ -32,11 +32,10 @@
accordion: {
type: Boolean,
default: false
}
},
data () {
return {
},
width: {
type: String,
default: '240px'
}
},
computed: {
@ -51,12 +50,21 @@
[`${prefixCls}-${this.mode}`]: this.mode
}
]
},
styles () {
let style = {};
if (this.mode === 'vertical') style.width = this.width;
return style;
}
},
methods: {
updateActiveKey () {
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') {
item.active = false;
@ -95,10 +103,18 @@
} else {
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 () {
this.updateActiveKey();
this.updateOpened();
},
events: {
'on-menu-item-select' (key) {

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

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

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

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

175
test/routers/menu.vue
View file

@ -1,137 +1,56 @@
<template>
<div>
<Menu mode="horizontal" :theme="theme" 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>导航三</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>
<Radio-group :model.sync="theme">
<Radio value="light"></Radio>
<Radio value="dark"></Radio>
<Radio value="primary"></Radio>
</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>
<Row>
<i-col span="8">
<Menu :theme="theme2">
<Submenu key="1">
<template slot="title">
<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">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
</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 title="留存">
<Menu-item key="3-4">用户留存</Menu-item>
<Menu-item key="3-5">流失用户</Menu-item>
</Menu-group>
</Submenu>
</Menu>
</i-col>
</Row>
<br>
<p>切换主题</p>
<Radio-group :model.sync="theme2">
<Radio value="light"></Radio>
<Radio value="dark"></Radio>
</Radio-group>
</template>
<script>
export default {
props: {},
data () {
return {
mode: 'vertical',
theme: 'dark'
}
},
computed: {},
methods: {
toggleMode () {
this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
},
change (d) {
console.log(d)
theme2: 'light'
}
}
}
</script>
</script>