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

update Cell

Browse source
This commit is contained in:
梁灏 2018-06-20 16:56:54 +08:00
parent 66fc7ae416
commit da76a284d0
4 changed files with 199 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
examples/routers/cell.vue
View file

@ -1,7 +1,26 @@
<template>
<div>
<div>cell</div>
</div>
<div style="margin: 100px;background: #f8f8f9;padding: 100px;">
<Card title="选项" :padding="0" shadow style="width: 300px;">
<CellGroup>
<Cell title="标题一" label="附属内容" to="/button"></Cell>
<Cell title="标题一" label="附属内容" extra="详细信息"></Cell>
<Cell title="标题一" label="附属内容" extra="详细信息" to="/button"></Cell>
<Cell title="标题一" label="附属内容" selected></Cell>
<Cell title="标题二">
<Icon type="trash-a" slot="icon"></Icon>
</Cell>
<Cell title="标题三"></Cell>
<Cell title="标题四" selected></Cell>
<Cell title="标题五"></Cell>
<Cell title="标题六" disabled></Cell>
<Cell title="标题七" extra="详细信息"></Cell>
<Cell title="标题七" extra="详细信息" selected></Cell>
<Cell title="标题七" label="附属内容" extra="详细信息"></Cell>
<Cell title="标题八"></Cell>
<Cell title="标题九"></Cell>
</CellGroup>
</Card>
</div>
</template>
<script>
export default {

34
src/components/cell/cell-item.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<div class="ivu-cell-item">
<div class="ivu-cell-icon">
<slot name="icon"></slot>
</div>
<div class="ivu-cell-main">
<div class="ivu-cell-title" v-if="title !== ''">{{ title }}</div>
<div class="ivu-cell-label" v-if="label !== ''">{{ label }}</div>
<slot></slot>
</div>
<div class="ivu-cell-footer">
<span class="ivu-cell-extra" v-if="extra !== ''">{{ extra }}</span>
<slot name="extra" v-else></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
extra: {
type: String,
default: ''
},
}
}
</script>

88
src/components/cell/cell.vue
View file

@ -1,11 +1,93 @@
<template>
<div :class="classes">
<a v-if="to" class="ivu-cell-link" @click="handleClick">
<CellItem :title="title" :label="label" :extra="extra">
<slot name="icon" slot="icon"></slot>
<slot></slot>
<slot name="extra" slot="extra"></slot>
</CellItem>
</a>
<div class="ivu-cell-link" v-else>
<CellItem :title="title" :label="label" :extra="extra">
<slot name="icon" slot="icon"></slot>
<slot></slot>
<slot name="extra" slot="extra"></slot>
</CellItem>
</div>
<div class="ivu-cell-arrow" v-if="to">
<slot name="arrow">
<Icon type="ios-arrow-right"></Icon>
</slot>
</div>
</div>
</template>
<script>
import CellItem from './cell-item.vue';
import Icon from '../icon/icon.vue';
const prefixCls = 'ivu-cell';
export default {
name: 'Cell',
components: { CellItem, Icon },
props: {
name: {
type: [String, Number]
},
title: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
extra: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
selected: {
type: Boolean,
default: false
},
to: {
type: [Object, String]
},
replace: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-selected`]: this.selected,
[`${prefixCls}-with-link`]: this.to
}
];
}
},
methods: {
handleClick () {
const isRoute = this.$router;
if (isRoute) {
this.replace ? this.$router.replace(this.to) : this.$router.push(this.to);
} else {
window.location.href = this.to;
}
}
}
}
</script>

60
src/styles/components/cell.less
View file

@ -1,5 +1,61 @@
@cell-prefix-cls: ~"@{css-prefix}cell";
.@{cell-prefix-cls} {
}
.@{cell-prefix-cls} {
position: relative;
overflow: hidden;
&-link, &-link:hover, &-link:active{
color: inherit;
}
&-icon{
display: inline-block;
margin-right: 4px;
font-size: @font-size-base;
vertical-align: middle;
&:empty{
display: none
}
}
&-main{
display: inline-block;
vertical-align: middle;
}
&-title{
line-height: 24px;
font-size: @font-size-base;
}
&-label{
line-height: 1.2;
font-size: @font-size-small;
color: @subsidiary-color;
}
&-selected &-label{
color: inherit;
}
&-footer{
display: inline-block;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 16px;
color: @text-color;
}
&-with-link &-footer{
right: 32px;
}
&-selected &-footer{
color: inherit;
}
&-arrow{
display: inline-block;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 16px;
font-size: @font-size-base;
}
}
.select-item(@cell-prefix-cls, @cell-prefix-cls);