alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[improvement] Cell: jsx (#2461)

Browse Source
This commit is contained in:
neverland
2019-01-07 21:52:46 +08:00
committed by GitHub
parent dd20a170ab
commit 5f9a4cf479
19 changed files with 200 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cell/index.js
+75
View File
@@ -0,0 +1,75 @@
import { use, isDef } from '../utils';
import Icon from '../icon';
import CellMixin from '../mixins/cell';
import RouterLink from '../mixins/router-link';
const [sfc, bem] = use('cell');
export default sfc({
mixins: [CellMixin, RouterLink],
props: {
size: String,
clickable: Boolean,
arrowDirection: String
},
computed: {
arrowIcon() {
return this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
}
},
methods: {
onClick() {
this.$emit('click');
this.routerLink();
}
},
render(h) {
const slots = this.$slots;
const showTitle = slots.title || isDef(this.title);
const showValue = slots.default || isDef(this.value);
const Title = showTitle && (
<div class={[bem('title'), this.titleClass]}>
{slots.title || <span>{this.title}</span>}
{this.label && <div class={[bem('label'), this.labelClass]}>{this.label}</div>}
</div>
);
const Value = showValue && (
<div class={[bem('value', { alone: !slots.title && !this.title }), this.valueClass]}>
{slots.default || <span>{this.value}</span>}
</div>
);
const LeftIcon = slots.icon || (
this.icon && <Icon class={bem('left-icon')} name={this.icon} />
);
const RightIcon = slots['right-icon'] || (
this.isLink && <Icon class={bem('right-icon')} name={this.arrowIcon} />
);
return (
<div
class={bem({
center: this.center,
required: this.required,
borderless: !this.border,
clickable: this.isLink || this.clickable,
[this.size]: this.size
})}
onClick={this.onClick}
>
{LeftIcon}
{Title}
{Value}
{RightIcon}
{slots.extra}
</div>
);
}
});
packages/cell/index.vue
-87
View File
@@ -1,87 +0,0 @@
<template>
<div
:class="[
b({
center,
required,
[size]: size,
borderless: !border,
clickable: isLink || clickable
})
]"
@click="onClick"
>
<slot name="icon">
<icon
v-if="icon"
:class="b('left-icon')"
:name="icon"
/>
</slot>
<div
v-if="isDef(title) || $slots.title"
:class="[b('title'), titleClass]"
>
<slot name="title">
<span v-text="title" />
<div
v-if="label"
v-text="label"
:class="[b('label'), labelClass]"
/>
</slot>
</div>
<div
v-if="isDef(value) || $slots.default"
:class="[b('value', { alone: !$slots.title && !title }), valueClass]"
>
<slot>
<span v-text="value" />
</slot>
</div>
<slot name="right-icon">
<icon
v-if="isLink"
:class="b('right-icon')"
:name="arrowIcon"
/>
</slot>
<slot name="extra" />
</div>
</template>
<script>
import Icon from '../icon';
import CellMixin from '../mixins/cell';
import RouterLink from '../mixins/router-link';
import create from '../utils/create-basic';
export default create({
name: 'cell',
components: {
Icon
},
mixins: [CellMixin, RouterLink],
props: {
size: String,
clickable: Boolean,
arrowDirection: String
},
computed: {
arrowIcon() {
return this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
}
},
methods: {
onClick() {
this.$emit('click');
this.routerLink();
}
}
});
</script>
packages/cell/test/__snapshots__/demo.spec.js.snap
+25 -37
View File
@@ -5,39 +5,33 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div>
<!---->
</div>
<div class="van-cell">
<!---->
<div class="van-cell__title"><span>单元格</span>
<div class="van-cell__label">描述信息</div>
</div>
<div class="van-cell__value"><span>内容</span></div>
<!---->
</div>
</div>
</div>
<div>
<div class="van-cell van-cell--large">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div>
<!---->
</div>
<div class="van-cell van-cell--large">
<!---->
<div class="van-cell__title"><span>单元格</span>
<div class="van-cell__label">描述信息</div>
</div>
<div class="van-cell__value"><span>内容</span></div>
<!---->
</div>
</div>
<div>
@@ -45,65 +39,58 @@ exports[`renders demo correctly 1`] = `
<!---->
<!----></i>
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div>
<!---->
</div>
</div>
<div>
<div class="van-cell">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
<!---->
</div>
</div>
<div>
<div class="van-cell van-cell--clickable">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<!----> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div> <i class="van-icon van-icon-arrow-down van-cell__right-icon" style="color:undefined;font-size:undefined;">
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow-down van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
</div>
<div>
<div class="van-cell van-cell--clickable">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<!----> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<!----> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
@@ -112,8 +99,10 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-shop-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
<div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
<div class="van-cell__value"><span>内容</span></div> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span>
</div>
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
@@ -121,18 +110,17 @@ exports[`renders demo correctly 1`] = `
<!---->
<!----></i>
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<!----> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
<div class="van-cell">
<!---->
<div class="van-cell__title"><span>单元格</span>
<!---->
</div>
<!----> <i class="custom-icon van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<i class="custom-icon van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>