feat(Grid): add icon-size prop (#4656)

This commit is contained in:
neverland 2019-10-07 18:00:45 +08:00 committed by GitHub
parent 307e9d3c7b
commit 39af08170c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 1 deletions

View File

@ -71,7 +71,13 @@ export default createComponent({
return [ return [
this.slots('icon') || this.slots('icon') ||
(this.icon && ( (this.icon && (
<Icon name={this.icon} dot={this.dot} info={this.info} class={bem('icon')} /> <Icon
name={this.icon}
dot={this.dot}
info={this.info}
size={this.parent.iconSize}
class={bem('icon')}
/>
)), )),
this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>) this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
]; ];

View File

@ -107,6 +107,7 @@ Vue.use(Grid).use(GridItem);
| center | Whether to center content | *boolean* | `true` | - | | center | Whether to center content | *boolean* | `true` | - |
| square | Whether to be square shape | *boolean* | `false` | - | | square | Whether to be square shape | *boolean* | `false` | - |
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | - | | clickable | Whether to show click feedback when clicked | *boolean* | `false` | - |
| icon-size | Icon size | *string \| number* | `28px` | 2.2.6 |
### GridItem Props ### GridItem Props

View File

@ -125,6 +125,7 @@ Vue.use(Grid).use(GridItem);
| center | 是否将格子内容居中显示 | *boolean* | `true` | - | | center | 是否将格子内容居中显示 | *boolean* | `true` | - |
| square | 是否将格子固定为正方形 | *boolean* | `false` | - | | square | 是否将格子固定为正方形 | *boolean* | `false` | - |
| clickable | 是否开启格子点击反馈 | *boolean* | `false` | - | | clickable | 是否开启格子点击反馈 | *boolean* | `false` | - |
| icon-size | 图标大小,默认单位为`px` | *string \| number* | `28px` | 2.2.6 |
### GridItem Props ### GridItem Props

View File

@ -10,6 +10,7 @@ export default createComponent({
props: { props: {
square: Boolean, square: Boolean,
gutter: [Number, String], gutter: [Number, String],
iconSize: [Number, String],
clickable: Boolean, clickable: Boolean,
columnNum: { columnNum: {
type: Number, type: Number,

View File

@ -1,5 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`icon-size prop 1`] = `
<div class="van-grid van-hairline--top">
<div class="van-grid-item" style="flex-basis: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-success van-grid-item__icon" style="font-size: 10px;">
<!----></i></div>
</div>
</div>
`;
exports[`sqaure and set gutter 1`] = ` exports[`sqaure and set gutter 1`] = `
<div class="van-grid" style="padding-left: 10rem;"> <div class="van-grid" style="padding-left: 10rem;">
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;"> <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">

View File

@ -38,3 +38,15 @@ test('sqaure and set gutter', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('icon-size prop', () => {
const wrapper = mount({
template: `
<van-grid icon-size="10">
<van-grid-item icon="success" />
</van-grid>
`
});
expect(wrapper).toMatchSnapshot();
});