alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[new feature] add grid component (#3669)

Browse Source
This commit is contained in:
neverland
2019-06-28 11:16:42 +08:00
committed by GitHub
parent 1850230102
commit 9737a8b9d0
36 changed files with 907 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/grid/test/__snapshots__/demo.spec.js.snap
+166
View File
@@ -0,0 +1,166 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<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-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<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-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<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-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<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-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
</div>
</div>
<div>
<div class="van-grid van-hairline--top">
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
</div>
</div>
<div>
<div class="van-grid">
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
</div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
</div>
</div>
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="van-grid van-hairline--top">
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
</div>
</div>
<div>
<div class="van-grid" style="padding-left: 10px;">
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">文字</span></div>
</div>
</div>
</div>
<div>
<div class="van-grid van-hairline--top">
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
<!----></i><span class="van-grid-item__text">路由跳转</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
<!----></i><span class="van-grid-item__text">URL 跳转</span></div>
</div>
</div>
</div>
</div>
`;
src/grid/test/__snapshots__/index.spec.js.snap
+15
View File
@@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`sqaure and set gutter 1`] = `
<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__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
</div>
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
</div>
</div>
`;
src/grid/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);
src/grid/test/index.spec.js
+40
View File
@@ -0,0 +1,40 @@
import Vue from 'vue';
import Grid from '..';
import GridItem from '../../grid-item';
import { mount } from '../../../test/utils';
Vue.use(Grid);
Vue.use(GridItem);
test('click grid item', () => {
const onClick = jest.fn();
const wrapper = mount({
template: `
<van-grid>
<van-grid-item @click="onClick" />
</van-grid>
`,
methods: {
onClick
}
});
const Item = wrapper.find('.van-grid-item');
Item.trigger('click');
expect(onClick).toHaveBeenCalledTimes(1);
});
test('sqaure and set gutter', () => {
const wrapper = mount({
template: `
<van-grid square :column-num="2" gutter="10rem">
<van-grid-item />
<van-grid-item />
<van-grid-item />
</van-grid>
`
});
expect(wrapper).toMatchSnapshot();
});