update Cell
This commit is contained in:
parent
66fc7ae416
commit
da76a284d0
4 changed files with 199 additions and 8 deletions
|
@ -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
34
src/components/cell/cell-item.vue
Normal 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>
|
|
@ -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>
|
|
@ -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);
|
Loading…
Add table
Reference in a new issue