Commit da76a284d0e2bd462843c6b9ae9daeec15576c48
1 parent
66fc7ae4
update Cell
Showing
4 changed files
with
198 additions
and
7 deletions
Show diff stats
examples/routers/cell.vue
| 1 | <template> | 1 | <template> |
| 2 | -<div> | ||
| 3 | - <div>cell</div> | ||
| 4 | -</div> | 2 | + <div style="margin: 100px;background: #f8f8f9;padding: 100px;"> |
| 3 | + <Card title="选项" :padding="0" shadow style="width: 300px;"> | ||
| 4 | + <CellGroup> | ||
| 5 | + <Cell title="标题一" label="附属内容" to="/button"></Cell> | ||
| 6 | + <Cell title="标题一" label="附属内容" extra="详细信息"></Cell> | ||
| 7 | + <Cell title="标题一" label="附属内容" extra="详细信息" to="/button"></Cell> | ||
| 8 | + <Cell title="标题一" label="附属内容" selected></Cell> | ||
| 9 | + <Cell title="标题二"> | ||
| 10 | + <Icon type="trash-a" slot="icon"></Icon> | ||
| 11 | + </Cell> | ||
| 12 | + <Cell title="标题三"></Cell> | ||
| 13 | + <Cell title="标题四" selected></Cell> | ||
| 14 | + <Cell title="标题五"></Cell> | ||
| 15 | + <Cell title="标题六" disabled></Cell> | ||
| 16 | + <Cell title="标题七" extra="详细信息"></Cell> | ||
| 17 | + <Cell title="标题七" extra="详细信息" selected></Cell> | ||
| 18 | + <Cell title="标题七" label="附属内容" extra="详细信息"></Cell> | ||
| 19 | + <Cell title="标题八"></Cell> | ||
| 20 | + <Cell title="标题九"></Cell> | ||
| 21 | + </CellGroup> | ||
| 22 | + </Card> | ||
| 23 | + </div> | ||
| 5 | </template> | 24 | </template> |
| 6 | <script> | 25 | <script> |
| 7 | export default { | 26 | export default { |
| 1 | +<template> | ||
| 2 | + <div class="ivu-cell-item"> | ||
| 3 | + <div class="ivu-cell-icon"> | ||
| 4 | + <slot name="icon"></slot> | ||
| 5 | + </div> | ||
| 6 | + <div class="ivu-cell-main"> | ||
| 7 | + <div class="ivu-cell-title" v-if="title !== ''">{{ title }}</div> | ||
| 8 | + <div class="ivu-cell-label" v-if="label !== ''">{{ label }}</div> | ||
| 9 | + <slot></slot> | ||
| 10 | + </div> | ||
| 11 | + <div class="ivu-cell-footer"> | ||
| 12 | + <span class="ivu-cell-extra" v-if="extra !== ''">{{ extra }}</span> | ||
| 13 | + <slot name="extra" v-else></slot> | ||
| 14 | + </div> | ||
| 15 | + </div> | ||
| 16 | +</template> | ||
| 17 | +<script> | ||
| 18 | + export default { | ||
| 19 | + props: { | ||
| 20 | + title: { | ||
| 21 | + type: String, | ||
| 22 | + default: '' | ||
| 23 | + }, | ||
| 24 | + label: { | ||
| 25 | + type: String, | ||
| 26 | + default: '' | ||
| 27 | + }, | ||
| 28 | + extra: { | ||
| 29 | + type: String, | ||
| 30 | + default: '' | ||
| 31 | + }, | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | +</script> | ||
| 0 | \ No newline at end of file | 35 | \ No newline at end of file |
src/components/cell/cell.vue
| 1 | <template> | 1 | <template> |
| 2 | - | 2 | + <div :class="classes"> |
| 3 | + <a v-if="to" class="ivu-cell-link" @click="handleClick"> | ||
| 4 | + <CellItem :title="title" :label="label" :extra="extra"> | ||
| 5 | + <slot name="icon" slot="icon"></slot> | ||
| 6 | + <slot></slot> | ||
| 7 | + <slot name="extra" slot="extra"></slot> | ||
| 8 | + </CellItem> | ||
| 9 | + </a> | ||
| 10 | + <div class="ivu-cell-link" v-else> | ||
| 11 | + <CellItem :title="title" :label="label" :extra="extra"> | ||
| 12 | + <slot name="icon" slot="icon"></slot> | ||
| 13 | + <slot></slot> | ||
| 14 | + <slot name="extra" slot="extra"></slot> | ||
| 15 | + </CellItem> | ||
| 16 | + </div> | ||
| 17 | + <div class="ivu-cell-arrow" v-if="to"> | ||
| 18 | + <slot name="arrow"> | ||
| 19 | + <Icon type="ios-arrow-right"></Icon> | ||
| 20 | + </slot> | ||
| 21 | + </div> | ||
| 22 | + </div> | ||
| 3 | </template> | 23 | </template> |
| 4 | <script> | 24 | <script> |
| 25 | + import CellItem from './cell-item.vue'; | ||
| 26 | + import Icon from '../icon/icon.vue'; | ||
| 27 | + | ||
| 28 | + const prefixCls = 'ivu-cell'; | ||
| 29 | + | ||
| 5 | export default { | 30 | export default { |
| 31 | + name: 'Cell', | ||
| 32 | + components: { CellItem, Icon }, | ||
| 6 | props: { | 33 | props: { |
| 7 | - | 34 | + name: { |
| 35 | + type: [String, Number] | ||
| 36 | + }, | ||
| 37 | + title: { | ||
| 38 | + type: String, | ||
| 39 | + default: '' | ||
| 40 | + }, | ||
| 41 | + label: { | ||
| 42 | + type: String, | ||
| 43 | + default: '' | ||
| 44 | + }, | ||
| 45 | + extra: { | ||
| 46 | + type: String, | ||
| 47 | + default: '' | ||
| 48 | + }, | ||
| 49 | + disabled: { | ||
| 50 | + type: Boolean, | ||
| 51 | + default: false | ||
| 52 | + }, | ||
| 53 | + selected: { | ||
| 54 | + type: Boolean, | ||
| 55 | + default: false | ||
| 56 | + }, | ||
| 57 | + to: { | ||
| 58 | + type: [Object, String] | ||
| 59 | + }, | ||
| 60 | + replace: { | ||
| 61 | + type: Boolean, | ||
| 62 | + default: false | ||
| 63 | + } | ||
| 8 | }, | 64 | }, |
| 9 | - | 65 | + data () { |
| 66 | + return { | ||
| 67 | + prefixCls: prefixCls | ||
| 68 | + } | ||
| 69 | + }, | ||
| 70 | + computed: { | ||
| 71 | + classes () { | ||
| 72 | + return [ | ||
| 73 | + `${prefixCls}`, | ||
| 74 | + { | ||
| 75 | + [`${prefixCls}-disabled`]: this.disabled, | ||
| 76 | + [`${prefixCls}-selected`]: this.selected, | ||
| 77 | + [`${prefixCls}-with-link`]: this.to | ||
| 78 | + } | ||
| 79 | + ]; | ||
| 80 | + } | ||
| 81 | + }, | ||
| 82 | + methods: { | ||
| 83 | + handleClick () { | ||
| 84 | + const isRoute = this.$router; | ||
| 85 | + if (isRoute) { | ||
| 86 | + this.replace ? this.$router.replace(this.to) : this.$router.push(this.to); | ||
| 87 | + } else { | ||
| 88 | + window.location.href = this.to; | ||
| 89 | + } | ||
| 90 | + } | ||
| 91 | + } | ||
| 10 | } | 92 | } |
| 11 | </script> | 93 | </script> |
| 12 | \ No newline at end of file | 94 | \ No newline at end of file |
src/styles/components/cell.less
| 1 | @cell-prefix-cls: ~"@{css-prefix}cell"; | 1 | @cell-prefix-cls: ~"@{css-prefix}cell"; |
| 2 | 2 | ||
| 3 | + | ||
| 3 | .@{cell-prefix-cls} { | 4 | .@{cell-prefix-cls} { |
| 5 | + position: relative; | ||
| 6 | + overflow: hidden; | ||
| 7 | + | ||
| 8 | + &-link, &-link:hover, &-link:active{ | ||
| 9 | + color: inherit; | ||
| 10 | + } | ||
| 11 | + | ||
| 12 | + &-icon{ | ||
| 13 | + display: inline-block; | ||
| 14 | + margin-right: 4px; | ||
| 15 | + font-size: @font-size-base; | ||
| 16 | + vertical-align: middle; | ||
| 17 | + &:empty{ | ||
| 18 | + display: none | ||
| 19 | + } | ||
| 20 | + } | ||
| 21 | + &-main{ | ||
| 22 | + display: inline-block; | ||
| 23 | + vertical-align: middle; | ||
| 24 | + } | ||
| 25 | + &-title{ | ||
| 26 | + line-height: 24px; | ||
| 27 | + font-size: @font-size-base; | ||
| 28 | + } | ||
| 29 | + &-label{ | ||
| 30 | + line-height: 1.2; | ||
| 31 | + font-size: @font-size-small; | ||
| 32 | + color: @subsidiary-color; | ||
| 33 | + } | ||
| 34 | + &-selected &-label{ | ||
| 35 | + color: inherit; | ||
| 36 | + } | ||
| 37 | + &-footer{ | ||
| 38 | + display: inline-block; | ||
| 39 | + position: absolute; | ||
| 40 | + transform: translateY(-50%); | ||
| 41 | + top: 50%; | ||
| 42 | + right: 16px; | ||
| 43 | + color: @text-color; | ||
| 44 | + } | ||
| 45 | + &-with-link &-footer{ | ||
| 46 | + right: 32px; | ||
| 47 | + } | ||
| 48 | + &-selected &-footer{ | ||
| 49 | + color: inherit; | ||
| 50 | + } | ||
| 4 | 51 | ||
| 5 | -} | ||
| 6 | \ No newline at end of file | 52 | \ No newline at end of file |
| 53 | + &-arrow{ | ||
| 54 | + display: inline-block; | ||
| 55 | + position: absolute; | ||
| 56 | + transform: translateY(-50%); | ||
| 57 | + top: 50%; | ||
| 58 | + right: 16px; | ||
| 59 | + font-size: @font-size-base; | ||
| 60 | + } | ||
| 61 | +} | ||
| 62 | +.select-item(@cell-prefix-cls, @cell-prefix-cls); | ||
| 7 | \ No newline at end of file | 63 | \ No newline at end of file |