blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Cell): add value slot, deprecate default slot (#8933)

Browse Source
This commit is contained in:
neverland 2021-06-26 21:31:46 +08:00 committed by GitHub
parent 8354877428
commit 29f800b827
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/cell/Cell.tsx
View File

@ -33,7 +33,7 @@ export const cellProps = {
valueClass: unknownProp, valueClass: unknownProp,
labelClass: unknownProp, labelClass: unknownProp,
titleClass: unknownProp, titleClass: unknownProp,
titleStyle: (null as unknown) as PropType<string | CSSProperties>, titleStyle: null as unknown as PropType<string | CSSProperties>,
arrowDirection: String as PropType<CellArrowDirection>, arrowDirection: String as PropType<CellArrowDirection>,
clickable: { clickable: {
type: Boolean as PropType<boolean | null>, type: Boolean as PropType<boolean | null>,
@ -76,13 +76,16 @@ export default defineComponent({
}; };
const renderValue = () => { const renderValue = () => {
const hasValue = slots.default || isDef(props.value); // default slot is deprecated
// should be removed in next major version
const slot = slots.value || slots.default;
const hasValue = slot || isDef(props.value);
if (hasValue) { if (hasValue) {
const hasTitle = slots.title || isDef(props.title); const hasTitle = slots.title || isDef(props.title);
return ( return (
<div class={[bem('value', { alone: !hasTitle }), props.valueClass]}> <div class={[bem('value', { alone: !hasTitle }), props.valueClass]}>
{slots.default ? slots.default() : <span>{props.value}</span>} {slot ? slot() : <span>{props.value}</span>}
</div> </div>
); );
} }

16
src/cell/README.md
View File

@ -183,14 +183,14 @@ app.use(CellGroup);
### Cell Slots ### Cell Slots
| Name | Description | | Name | Description |
| ---------- | --------------------------------- | | -------------- | --------------------------------- |
| default | Custom value | | title | Custom title |
| icon | Custom icon | | value `v3.1.1` | Custom value |
| title | Custom title | | label | Custom label |
| label | Custom label | | icon | Custom left icon |
| right-icon | Custom right icon | | right-icon | Custom right icon |
| extra | Custom extra content on the right | | extra | Custom extra content on the right |
### CSS Variables ### CSS Variables

16
src/cell/README.zh-CN.md
View File

@ -188,14 +188,14 @@ app.use(CellGroup);
### Cell Slots ### Cell Slots
| 名称 | 说明 | | 名称 | 说明 |
| ---------- | ----------------------------- | | -------------- | ---------------------------- |
| default | 自定义右侧 value 的内容 | | title | 自定义左侧标题 |
| title | 自定义左侧 title 的内容 | | value `v3.1.1` | 自定义右侧内容 |
| label | 自定义标题下方 label 的内容 | | label | 自定义标题下方的描述信息 |
| icon | 自定义左侧图标 | | icon | 自定义左侧图标 |
| right-icon | 自定义右侧按钮，默认为`arrow` | | right-icon | 自定义右侧图标 |
| extra | 自定义单元格最右侧的额外内容 | | extra | 自定义单元格最右侧的额外内容 |
### 样式变量 ### 样式变量

10
src/cell/test/__snapshots__/index.spec.ts.snap
View File

@ -15,7 +15,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
exports[`should render default slot correctly 1`] = ` exports[`should render default slot correctly 1`] = `
<div class="van-cell"> <div class="van-cell">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
Custom Default Custom Value
</div> </div>
</div> </div>
`; `;
@ -52,3 +52,11 @@ exports[`should render title slot correctly 1`] = `
</div> </div>
</div> </div>
`; `;
exports[`should render value slot correctly 1`] = `
<div class="van-cell">
<div class="van-cell__value van-cell__value--alone">
Custom Value
</div>
</div>
`;

11
src/cell/test/index.spec.ts
View File

@ -4,7 +4,16 @@ import { mount } from '../../../test';
test('should render default slot correctly', () => { test('should render default slot correctly', () => {
const wrapper = mount(Cell, { const wrapper = mount(Cell, {
slots: { slots: {
default: () => 'Custom Default', default: () => 'Custom Value',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render value slot correctly', () => {
const wrapper = mount(Cell, {
slots: {
value: () => 'Custom Value',
}, },
}); });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();