publish 0.9.10-rc-2
publish 0.9.10-rc-2
This commit is contained in:
梁灏
parent
fd5cd82376
commit
fc3ffbe08d
6 changed files with 95 additions and 149 deletions
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -19,12 +19,6 @@
|
||||||
return {
|
return {
|
||||||
prefixCls: prefixCls
|
prefixCls: prefixCls
|
||||||
}
|
}
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -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
|
||||||
}
|
},
|
||||||
},
|
width: {
|
||||||
data () {
|
type: String,
|
||||||
return {
|
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) {
|
||||||
|
|
|
||||||
|
|
@ -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,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);
|
||||||
|
|
@ -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>
|
||||||
<Submenu key="3">
|
内容管理
|
||||||
<template slot="title"><Icon type="ionic"></Icon>导航三</template>
|
</template>
|
||||||
<Menu-group title="集合1">
|
<Menu-item key="1-1">文章管理</Menu-item>
|
||||||
<Menu-item key="3-1">导航三 - 一</Menu-item>
|
<Menu-item key="1-2">评论管理</Menu-item>
|
||||||
<Menu-item key="3-2">导航三 - 二</Menu-item>
|
<Menu-item key="1-3">举报管理</Menu-item>
|
||||||
</Menu-group>
|
</Submenu>
|
||||||
<Menu-group title="集合2">
|
<Submenu key="2">
|
||||||
<Menu-item key="3-3">导航三 - 三</Menu-item>
|
<template slot="title">
|
||||||
<Menu-item key="3-4">导航三 - 四</Menu-item>
|
<Icon type="ios-people"></Icon>
|
||||||
</Menu-group>
|
用户管理
|
||||||
</Submenu>
|
</template>
|
||||||
<Menu-item key="4">导航四</Menu-item>
|
<Menu-item key="2-1">新增用户</Menu-item>
|
||||||
</Menu>
|
<Menu-item key="2-2">活跃用户</Menu-item>
|
||||||
<br><br>
|
</Submenu>
|
||||||
<Radio-group :model.sync="theme">
|
<Submenu key="3">
|
||||||
<Radio value="light"></Radio>
|
<template slot="title">
|
||||||
<Radio value="dark"></Radio>
|
<Icon type="stats-bars"></Icon>
|
||||||
<Radio value="primary"></Radio>
|
统计分析
|
||||||
</Radio-group>
|
</template>
|
||||||
<br><br>
|
<Menu-group title="使用">
|
||||||
<Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change">
|
<Menu-item key="3-1">新增和启动</Menu-item>
|
||||||
<Menu-item key="1">
|
<Menu-item key="3-2">活跃分析</Menu-item>
|
||||||
<Icon type="ionic"></Icon>
|
<Menu-item key="3-3">时段分析</Menu-item>
|
||||||
<span>导航一</span>
|
</Menu-group>
|
||||||
</Menu-item>
|
<Menu-group title="留存">
|
||||||
<Menu-group title="集合1">
|
<Menu-item key="3-4">用户留存</Menu-item>
|
||||||
<Menu-item key="2">
|
<Menu-item key="3-5">流失用户</Menu-item>
|
||||||
<Icon type="ionic"></Icon>
|
</Menu-group>
|
||||||
导航二
|
</Submenu>
|
||||||
</Menu-item>
|
</Menu>
|
||||||
<Menu-item key="3">导航三</Menu-item>
|
</i-col>
|
||||||
</Menu-group>
|
|
||||||
<Menu-group title="集合2">
|
</Row>
|
||||||
<Menu-item key="4">导航四</Menu-item>
|
<br>
|
||||||
<Menu-item key="5">导航五</Menu-item>
|
<p>切换主题</p>
|
||||||
</Menu-group>
|
<Radio-group :model.sync="theme2">
|
||||||
<Submenu key="6">
|
<Radio value="light"></Radio>
|
||||||
<template slot="title"><Icon type="ionic"></Icon>导航六</template>
|
<Radio value="dark"></Radio>
|
||||||
<Menu-group title="集合1">
|
</Radio-group>
|
||||||
<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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue