mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Collapse: add border prop (#2933)
This commit is contained in:
parent
4d0e3d6644
commit
144fa2d711
@ -77,6 +77,7 @@ export default {
|
|||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| v-model | names of current active panels | `Array | String | Number` | - |
|
| v-model | names of current active panels | `Array | String | Number` | - |
|
||||||
| accordion | Whether to be accordion mode | `Boolean` | `false` |
|
| accordion | Whether to be accordion mode | `Boolean` | `false` |
|
||||||
|
| border | Whether to show outer border | `Boolean` | `true` |
|
||||||
|
|
||||||
### Collapse Event
|
### Collapse Event
|
||||||
|
|
||||||
|
@ -5,7 +5,11 @@ const [sfc, bem] = use('collapse');
|
|||||||
export default sfc({
|
export default sfc({
|
||||||
props: {
|
props: {
|
||||||
accordion: Boolean,
|
accordion: Boolean,
|
||||||
value: [String, Number, Array]
|
value: [String, Number, Array],
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
@ -27,6 +31,10 @@ export default sfc({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render(h) {
|
render(h) {
|
||||||
return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
|
return (
|
||||||
|
<div class={[bem(), { 'van-hairline--top-bottom': this.border }]}>
|
||||||
|
{this.slots()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,5 +1,28 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`disable border 1`] = `
|
||||||
|
<div class="van-collapse">
|
||||||
|
<div class="van-collapse-item">
|
||||||
|
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||||
|
<div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
<!----></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>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
<!----></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>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
<!----></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`render collapse-item slot 1`] = `
|
exports[`render collapse-item slot 1`] = `
|
||||||
<div class="van-collapse van-hairline--top-bottom">
|
<div class="van-collapse van-hairline--top-bottom">
|
||||||
<div class="van-collapse-item">
|
<div class="van-collapse-item">
|
||||||
|
@ -4,7 +4,7 @@ import { later, mount } from '../../../test/utils';
|
|||||||
|
|
||||||
const component = {
|
const component = {
|
||||||
template: `
|
template: `
|
||||||
<collapse v-model="active" :accordion="accordion">
|
<collapse v-model="active" :accordion="accordion" :border="border">
|
||||||
<collapse-item title="a" name="first">content</collapse-item>
|
<collapse-item title="a" name="first">content</collapse-item>
|
||||||
<collapse-item title="b">content</collapse-item>
|
<collapse-item title="b">content</collapse-item>
|
||||||
<collapse-item title="c">content</collapse-item>
|
<collapse-item title="c">content</collapse-item>
|
||||||
@ -15,7 +15,11 @@ const component = {
|
|||||||
CollapseItem
|
CollapseItem
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
accordion: Boolean
|
accordion: Boolean,
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -89,3 +93,13 @@ it('render collapse-item slot', () => {
|
|||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('disable border', () => {
|
||||||
|
const wrapper = mount(component, {
|
||||||
|
propsData: {
|
||||||
|
border: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
@ -87,8 +87,9 @@ export default {
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
|------|------|------|------|------|
|
|------|------|------|------|------|
|
||||||
| v-model | 当前展开面板的 name | `Array | String | Number` | - |
|
| v-model | 当前展开面板的 name | `Array | String | Number` | - | - |
|
||||||
| accordion | 是否开启手风琴模式 | `Boolean` | `false` |
|
| accordion | 是否开启手风琴模式 | `Boolean` | `false` | - |
|
||||||
|
| border | 是否显示外边框 | `Boolean` | `true` | 1.6.9 |
|
||||||
|
|
||||||
### Collapse Event
|
### Collapse Event
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user