chenhaodong / mew-iview

Browse Code »

Commit da76a284d0e2bd462843c6b9ae9daeec15576c48

Authored by 梁灏 2018-06-20 16:56:54 +0800

1 parent 66fc7ae4

update Cell

Showing 4 changed files with 198 additions and 7 deletions Show diff stats

Inline Side-by-side

examples/routers/cell.vue

Wrap text Show/Hide comments View file @da76a28

1	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	24	</template>
6	25	<script>
7	26	export default {
...	...

src/components/cell/cell-item.vue 0 → 100644

Wrap text Show/Hide comments View file @da76a28

	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	35	\ No newline at end of file
...	...

src/components/cell/cell.vue

Wrap text Show/Hide comments View file @da76a28

1	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	23	</template>
4	24	<script>
	25	+ import CellItem from './cell-item.vue';
	26	+ import Icon from '../icon/icon.vue';
	27	+
	28	+ const prefixCls = 'ivu-cell';
	29	+
5	30	export default {
	31	+ name: 'Cell',
	32	+ components: { CellItem, Icon },
6	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	93	</script>
12	94	\ No newline at end of file
...	...

src/styles/components/cell.less

Wrap text Show/Hide comments View file @da76a28

1	1	@cell-prefix-cls: ~"@{css-prefix}cell";
2	2
	3	+
3	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	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	63	\ No newline at end of file
...	...