mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Collapse: jsx (#2501)
This commit is contained in:
neverland
GitHub
parent
9e01b1ef16
commit
4b8bd8e9be
@ -1,50 +1,13 @@
|
||||
<template>
|
||||
<div :class="[b(), { 'van-hairline--top': index }]">
|
||||
<cell
|
||||
v-bind="$props"
|
||||
:class="b('title', { disabled, expanded })"
|
||||
@click="onClick"
|
||||
>
|
||||
<slot
|
||||
name="title"
|
||||
slot="title"
|
||||
/>
|
||||
<slot
|
||||
name="icon"
|
||||
slot="icon"
|
||||
/>
|
||||
<slot name="value" />
|
||||
<slot
|
||||
name="right-icon"
|
||||
slot="right-icon"
|
||||
/>
|
||||
</cell>
|
||||
<div
|
||||
v-if="inited"
|
||||
v-show="show"
|
||||
ref="wrapper"
|
||||
:class="b('wrapper')"
|
||||
@transitionend="onTransitionEnd"
|
||||
>
|
||||
<div
|
||||
ref="content"
|
||||
:class="b('content')"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { use, isDef } from '../utils';
|
||||
import { raf } from '../utils/raf';
|
||||
import create from '../utils/create';
|
||||
import Cell from '../cell';
|
||||
import CellMixin from '../mixins/cell';
|
||||
import FindParent from '../mixins/find-parent';
|
||||
|
||||
export default create({
|
||||
name: 'collapse-item',
|
||||
const [sfc, bem] = use('collapse-item');
|
||||
const CELL_SLOTS = ['title', 'icon', 'right-icon'];
|
||||
|
||||
export default sfc({
|
||||
mixins: [CellMixin, FindParent],
|
||||
|
||||
props: {
|
||||
@ -73,7 +36,7 @@ export default create({
|
||||
},
|
||||
|
||||
currentName() {
|
||||
return this.isDef(this.name) ? this.name : this.index;
|
||||
return isDef(this.name) ? this.name : this.index;
|
||||
},
|
||||
|
||||
expanded() {
|
||||
@ -144,6 +107,38 @@ export default create({
|
||||
this.$refs.wrapper.style.height = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const Title = (
|
||||
<Cell
|
||||
class={bem('title', { disabled: this.disabled, expanded: this.expanded })}
|
||||
onClick={this.onClick}
|
||||
{...{ props: this.$props }}
|
||||
>
|
||||
{this.$slots.value}
|
||||
{CELL_SLOTS.map(slot => h('template', { slot }, this.$slots[slot]))}
|
||||
</Cell>
|
||||
);
|
||||
|
||||
const Content = this.inited && (
|
||||
<div
|
||||
v-show={this.show}
|
||||
ref="wrapper"
|
||||
class={bem('wrapper')}
|
||||
onTransitionend={this.onTransitionEnd}
|
||||
>
|
||||
<div ref="content" class={bem('content')}>
|
||||
{this.$slots.default}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class={[bem(), { 'van-hairline--top': this.index }]}>
|
||||
{Title}
|
||||
{Content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,18 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
:class="b()"
|
||||
class="van-hairline--top-bottom"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
import { use } from '../utils';
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'collapse',
|
||||
const [sfc, bem] = use('collapse');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
accordion: Boolean,
|
||||
value: [String, Number, Array]
|
||||
@ -34,6 +24,9 @@ export default create({
|
||||
this.$emit('change', name);
|
||||
this.$emit('input', name);
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return <div class={[bem(), 'van-hairline--top-bottom']}>{this.$slots.default}</div>;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -3,12 +3,13 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-collapse">
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>有赞微商城</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
@ -21,33 +22,34 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div disabled="disabled" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<div class="van-cell__title"><span>有赞美业</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-collapse">
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>有赞微商城</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
@ -60,28 +62,28 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>有赞美业</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-collapse">
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title">
|
||||
@ -89,12 +91,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
|
||||
@ -102,12 +104,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
</div>
|
||||
<div class="van-cell__value"> </div>
|
||||
<div class="van-cell__value">
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -121,4 +121,3 @@ export default {
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
| right-icon | 自定义右侧按钮，默认是`arrow` |
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user