mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] CollapseItem: enhancement, can use like Cell (#1671)
This commit is contained in:
张帅
neverland
parent
1bb569fe23
commit
539145d661
@ -5,8 +5,11 @@
|
||||
{ 'van-hairline--top': index }
|
||||
]"
|
||||
>
|
||||
<cell :class="b('title')" is-link @click="onClick">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
<cell :class="b('title')" @click="onClick" v-bind="$props">
|
||||
<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')">
|
||||
@ -28,7 +31,18 @@ export default create({
|
||||
|
||||
props: {
|
||||
name: [String, Number],
|
||||
title: String
|
||||
icon: String,
|
||||
label: String,
|
||||
title: [String, Number],
|
||||
value: [String, Number],
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isLink: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
@ -22,7 +22,9 @@
|
||||
<div slot="title">{{ $t('title1') }}<van-icon name="question" /></div>
|
||||
{{ $t('content1') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')" :value="$t('content')" icon="shop">
|
||||
{{ $t('content2') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
@ -85,11 +85,19 @@ export default {
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | Name | `String | Number` | `index` |
|
||||
| title | Title | `String` | - |
|
||||
| icon | Left Icon | `String` | - |
|
||||
| title | Title | `String | Number` | - |
|
||||
| value | Right text | `String | Number` | - |
|
||||
| label | Description below the title | `String` | - |
|
||||
| border | Whether to show inner border | `Boolean` | `true` |
|
||||
| is-link | Whether to show link icon | `Boolean` | `true` |
|
||||
|
||||
### CollapseItem Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| default | Content |
|
||||
| title | Custom title |
|
||||
| value | Custom value |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| right-icon | Custom right icon |
|
||||
|
||||
@ -7,8 +7,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-collapse-item--expanded">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞微商城</div>
|
||||
<div class="van-cell__title"><span>有赞微商城</span>
|
||||
<!---->
|
||||
</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>
|
||||
@ -20,8 +22,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞零售</div>
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
<!---->
|
||||
</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>
|
||||
@ -31,8 +35,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞美业</div>
|
||||
<div class="van-cell__title"><span>有赞美业</span>
|
||||
<!---->
|
||||
</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>
|
||||
@ -46,8 +52,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-collapse-item--expanded">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞微商城</div>
|
||||
<div class="van-cell__title"><span>有赞微商城</span>
|
||||
<!---->
|
||||
</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>
|
||||
@ -59,8 +67,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞零售</div>
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
<!---->
|
||||
</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>
|
||||
@ -70,8 +80,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞美业</div>
|
||||
<div class="van-cell__title"><span>有赞美业</span>
|
||||
<!---->
|
||||
</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>
|
||||
@ -85,14 +97,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__title">
|
||||
<div>有赞微商城
|
||||
<i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
</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>
|
||||
@ -101,9 +113,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">有赞零售</div>
|
||||
<i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
<!---->
|
||||
</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>
|
||||
|
||||
@ -97,12 +97,19 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 面板唯一标识符，默认为索引值 | `String | Number` | `index` |
|
||||
| title | 标题 | `String` | - |
|
||||
|
||||
| icon | 左侧图标，可选值见 Icon 组件 | `String` | - |
|
||||
| title | 左侧标题 | `String | Number` | - |
|
||||
| value | 右侧内容 | `String | Number` | - |
|
||||
| label | 标题下方的描述信息 | `String` | - |
|
||||
| border | 是否显示内边框 | `Boolean` | `true` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `true` |
|
||||
|
||||
### CollapseItem Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| default | 面板内容 |
|
||||
| title | 自定义标题内容 |
|
||||
| value | 自定义显示内容 |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
| right-icon | 自定义右侧按钮，默认是`arrow` |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user