mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: layout component
This commit is contained in:
chenjiahan
parent
4a25ebf9ab
commit
e671e22ea5
119
src-next/col/README.md
Normal file
119
src-next/col/README.md
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
# Layout
|
||||||
|
|
||||||
|
### Intro
|
||||||
|
|
||||||
|
Quickly and easily create layouts with `van-row` and `van-col`
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Col, Row } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Col);
|
||||||
|
Vue.use(Row);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-row>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row>
|
||||||
|
<van-col span="4">span: 4</van-col>
|
||||||
|
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row>
|
||||||
|
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||||
|
</van-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Column Spacing
|
||||||
|
|
||||||
|
Set grid spacing using `gutter` attribute. The default value is 0
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
</van-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Flex Layout
|
||||||
|
|
||||||
|
Setting `type` to `flex` to enable flex layout
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-row type="flex">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="center">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="end">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="space-between">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="space-around">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Row Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| type | Layout type, can be set to `flex` | _string_ | - |
|
||||||
|
| gutter | Grid spacing（px） | _number \| string_ | - |
|
||||||
|
| tag | Custom element tag | _string_ | `div` |
|
||||||
|
| justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` |
|
||||||
|
| align | Flex cross axis, be set to center/bottom | _string_ | `top` |
|
||||||
|
|
||||||
|
### Col Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| span | number of column the grid spans | _number \| string_ | - |
|
||||||
|
| offset | number of spacing on the left side of the grid | _number \| string_ | - |
|
||||||
|
| tag | Custom element tag | _string_ | `div` |
|
||||||
|
|
||||||
|
### Row Events
|
||||||
|
|
||||||
|
| Event | Description | Arguments |
|
||||||
|
| ----- | ------------------------ | -------------- |
|
||||||
|
| click | Triggered when click row | _event: Event_ |
|
||||||
|
|
||||||
|
### Col Events
|
||||||
|
|
||||||
|
| Event | Description | Arguments |
|
||||||
|
| ----- | ------------------------ | -------------- |
|
||||||
|
| click | Triggered when click col | _event: Event_ |
|
||||||
124
src-next/col/README.zh-CN.md
Normal file
124
src-next/col/README.zh-CN.md
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
# Layout 布局
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||||
|
|
||||||
|
### 引入
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Col, Row } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Col);
|
||||||
|
Vue.use(Row);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
||||||
|
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-row>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row>
|
||||||
|
<van-col span="4">span: 4</van-col>
|
||||||
|
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row>
|
||||||
|
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||||
|
</van-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 设置列元素间距
|
||||||
|
|
||||||
|
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
</van-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Flex 布局
|
||||||
|
|
||||||
|
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 左对齐 -->
|
||||||
|
<van-row type="flex">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<!-- 居中 -->
|
||||||
|
<van-row type="flex" justify="center">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<!-- 右对齐 -->
|
||||||
|
<van-row type="flex" justify="end">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<!-- 两端对齐 -->
|
||||||
|
<van-row type="flex" justify="space-between">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<!-- 每个元素的两侧间隔相等 -->
|
||||||
|
<van-row type="flex" justify="space-around">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Row Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| type | 布局方式，可选值为`flex` | _string_ | - |
|
||||||
|
| gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - |
|
||||||
|
| tag | 自定义元素标签 | _string_ | `div` |
|
||||||
|
| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
|
||||||
|
| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
|
||||||
|
|
||||||
|
### Col Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | -------------- | ------------------ | ------ |
|
||||||
|
| span | 列元素宽度 | _number \| string_ | - |
|
||||||
|
| offset | 列元素偏移距离 | _number \| string_ | - |
|
||||||
|
| tag | 自定义元素标签 | _string_ | `div` |
|
||||||
|
|
||||||
|
### Row Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| ------ | ---------- | -------------- |
|
||||||
|
| click | 点击时触发 | _event: Event_ |
|
||||||
|
|
||||||
|
### Col Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| ------ | ---------- | -------------- |
|
||||||
|
| click | 点击时触发 | _event: Event_ |
|
||||||
112
src-next/col/demo/index.vue
Normal file
112
src-next/col/demo/index.vue
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<demo-section>
|
||||||
|
<demo-block :title="t('basicUsage')">
|
||||||
|
<van-row>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row>
|
||||||
|
<van-col span="4">span: 4</van-col>
|
||||||
|
<van-col span="10" offset="4">
|
||||||
|
offset: 4, span: 10
|
||||||
|
</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row>
|
||||||
|
<van-col offset="12" span="12">
|
||||||
|
offset: 12, span: 12
|
||||||
|
</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('title2')">
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
<van-col span="8">span: 8</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block v-if="!isWeapp" :title="t('title3')">
|
||||||
|
<van-row type="flex">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="center">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="end">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="space-between">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row type="flex" justify="space-around">
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
<van-col span="6">span: 6</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
</demo-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
i18n: {
|
||||||
|
'zh-CN': {
|
||||||
|
title2: '在列元素之间增加间距',
|
||||||
|
title3: 'Flex 布局',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
title2: 'Column Spacing',
|
||||||
|
title3: 'Flex Layout',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../../style/var';
|
||||||
|
|
||||||
|
.demo-col {
|
||||||
|
background: @white;
|
||||||
|
|
||||||
|
.van-doc-demo-block {
|
||||||
|
padding: 0 @padding-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-doc-demo-block__title {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-col {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: @white;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background-clip: content-box;
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: #39a9ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
background-color: #66c6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
51
src-next/col/index.js
Normal file
51
src-next/col/index.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import { createNamespace } from '../utils';
|
||||||
|
import { ChildrenMixin } from '../mixins/relation';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('col');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
mixins: [ChildrenMixin('vanRow')],
|
||||||
|
|
||||||
|
props: {
|
||||||
|
span: [Number, String],
|
||||||
|
offset: [Number, String],
|
||||||
|
tag: {
|
||||||
|
type: String,
|
||||||
|
default: 'div',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
style() {
|
||||||
|
const { index } = this;
|
||||||
|
const { spaces } = this.parent || {};
|
||||||
|
|
||||||
|
if (spaces && spaces[index]) {
|
||||||
|
const { left, right } = spaces[index];
|
||||||
|
return {
|
||||||
|
paddingLeft: left ? `${left}px` : null,
|
||||||
|
paddingRight: right ? `${right}px` : null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
this.$emit('click', event);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { span, offset } = this;
|
||||||
|
return (
|
||||||
|
<this.tag
|
||||||
|
style={this.style}
|
||||||
|
class={bem({ [span]: span, [`offset-${offset}`]: offset })}
|
||||||
|
onClick={this.onClick}
|
||||||
|
>
|
||||||
|
{this.$slots.default?.()}
|
||||||
|
</this.tag>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
20
src-next/col/index.less
Normal file
20
src-next/col/index.less
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
|
||||||
|
.van-col {
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-col(24);
|
||||||
|
.generate-col(@n, @i: 1) when (@i =< @n) {
|
||||||
|
.van-col--@{i} {
|
||||||
|
width: @i * 100% / 24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-col--offset-@{i} {
|
||||||
|
margin-left: @i * 100% / 24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-col(@n, (@i + 1));
|
||||||
|
}
|
||||||
58
src-next/col/test/__snapshots__/demo.spec.js.snap
Normal file
58
src-next/col/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders demo correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="van-row">
|
||||||
|
<div class="van-col van-col--8">span: 8</div>
|
||||||
|
<div class="van-col van-col--8">span: 8</div>
|
||||||
|
<div class="van-col van-col--8">span: 8</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-row">
|
||||||
|
<div class="van-col van-col--4">span: 4</div>
|
||||||
|
<div class="van-col van-col--10 van-col--offset-4">
|
||||||
|
offset: 4, span: 10
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-row">
|
||||||
|
<div class="van-col van-col--12 van-col--offset-12">
|
||||||
|
offset: 12, span: 12
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-row">
|
||||||
|
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
|
||||||
|
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
|
||||||
|
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-row van-row--flex">
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-row van-row--flex van-row--justify-center">
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-row van-row--flex van-row--justify-end">
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-row van-row--flex van-row--justify-space-between">
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-row van-row--flex van-row--justify-space-around">
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
<div class="van-col van-col--6">span: 6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
22
src-next/col/test/__snapshots__/index.spec.js.snap
Normal file
22
src-next/col/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`gutter prop 1`] = `
|
||||||
|
<div class="van-row">
|
||||||
|
<div class="van-col van-col--24">24</div>
|
||||||
|
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
|
||||||
|
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
|
||||||
|
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
|
||||||
|
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
|
||||||
|
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
|
||||||
|
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
|
||||||
|
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||||
|
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
|
||||||
|
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
|
||||||
|
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
|
||||||
|
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||||
|
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
|
||||||
|
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
|
||||||
|
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
|
||||||
|
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
4
src-next/col/test/demo.spec.js
Normal file
4
src-next/col/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
48
src-next/col/test/index.spec.js
Normal file
48
src-next/col/test/index.spec.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import Col from '..';
|
||||||
|
import Row from '../../row';
|
||||||
|
import { mount } from '../../../test';
|
||||||
|
|
||||||
|
test('Col click event', () => {
|
||||||
|
const wrapper = mount(Col);
|
||||||
|
wrapper.trigger('click');
|
||||||
|
|
||||||
|
expect(wrapper.emitted('click')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Row click event', () => {
|
||||||
|
const wrapper = mount(Row);
|
||||||
|
wrapper.trigger('click');
|
||||||
|
|
||||||
|
expect(wrapper.emitted('click')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('gutter prop', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-row gutter="24">
|
||||||
|
<van-col span="24">24</van-col>
|
||||||
|
|
||||||
|
<van-col span="12">12</van-col>
|
||||||
|
<van-col span="12">12</van-col>
|
||||||
|
|
||||||
|
<van-col span="8">8</van-col>
|
||||||
|
<van-col span="8">8</van-col>
|
||||||
|
<van-col span="8">8</van-col>
|
||||||
|
|
||||||
|
<van-col span="6">6</van-col>
|
||||||
|
<van-col span="6">6</van-col>
|
||||||
|
<van-col span="6">6</van-col>
|
||||||
|
<van-col span="6">6</van-col>
|
||||||
|
|
||||||
|
<van-col span="7">7</van-col>
|
||||||
|
<van-col span="6">6</van-col>
|
||||||
|
<van-col span="5">5</van-col>
|
||||||
|
<van-col span="4">4</van-col>
|
||||||
|
<van-col span="3">3</van-col>
|
||||||
|
<van-col span="2">2</van-col>
|
||||||
|
</van-row>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
87
src-next/row/index.js
Normal file
87
src-next/row/index.js
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import { createNamespace } from '../utils';
|
||||||
|
import { ParentMixin } from '../mixins/relation';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('row');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
mixins: [ParentMixin('vanRow')],
|
||||||
|
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
align: String,
|
||||||
|
justify: String,
|
||||||
|
tag: {
|
||||||
|
type: String,
|
||||||
|
default: 'div',
|
||||||
|
},
|
||||||
|
gutter: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
spaces() {
|
||||||
|
const gutter = Number(this.gutter);
|
||||||
|
|
||||||
|
if (!gutter) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const spaces = [];
|
||||||
|
const groups = [[]];
|
||||||
|
|
||||||
|
let totalSpan = 0;
|
||||||
|
this.children.forEach((item, index) => {
|
||||||
|
totalSpan += Number(item.span);
|
||||||
|
|
||||||
|
if (totalSpan > 24) {
|
||||||
|
groups.push([index]);
|
||||||
|
totalSpan -= 24;
|
||||||
|
} else {
|
||||||
|
groups[groups.length - 1].push(index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
groups.forEach((group) => {
|
||||||
|
const averagePadding = (gutter * (group.length - 1)) / group.length;
|
||||||
|
|
||||||
|
group.forEach((item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
spaces.push({ right: averagePadding });
|
||||||
|
} else {
|
||||||
|
const left = gutter - spaces[item - 1].right;
|
||||||
|
const right = averagePadding - left;
|
||||||
|
spaces.push({ left, right });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return spaces;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
this.$emit('click', event);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { align, justify } = this;
|
||||||
|
const flex = this.type === 'flex';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<this.tag
|
||||||
|
class={bem({
|
||||||
|
flex,
|
||||||
|
[`align-${align}`]: flex && align,
|
||||||
|
[`justify-${justify}`]: flex && justify,
|
||||||
|
})}
|
||||||
|
onClick={this.onClick}
|
||||||
|
>
|
||||||
|
{this.$slots.default?.()}
|
||||||
|
</this.tag>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -1,33 +1,34 @@
|
|||||||
import { VNode } from 'vue';
|
// import { VNode } from 'vue';
|
||||||
|
|
||||||
function flattenVNodes(vnodes: VNode[]) {
|
// function flattenVNodes(vnodes: VNode[]) {
|
||||||
const result: VNode[] = [];
|
// const result: VNode[] = [];
|
||||||
|
|
||||||
function traverse(vnodes: VNode[]) {
|
// function traverse(vnodes: VNode[]) {
|
||||||
vnodes.forEach((vnode) => {
|
// vnodes.forEach((vnode) => {
|
||||||
result.push(vnode);
|
// result.push(vnode);
|
||||||
|
|
||||||
if (vnode.componentInstance) {
|
// if (vnode.componentInstance) {
|
||||||
traverse(vnode.componentInstance.$children.map((item) => item.$vnode));
|
// traverse(vnode.componentInstance.$children.map((item) => item.$vnode));
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (vnode.children) {
|
// if (vnode.children) {
|
||||||
traverse(vnode.children);
|
// traverse(vnode.children);
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
traverse(vnodes);
|
// traverse(vnodes);
|
||||||
return result;
|
// return result;
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
// TODO
|
||||||
// sort children instances by vnodes order
|
// sort children instances by vnodes order
|
||||||
export function sortChildren(children: Vue[], parent: Vue) {
|
export function sortChildren(children: Vue[], parent: Vue) {
|
||||||
const { componentOptions } = parent.$vnode;
|
// const { componentOptions } = parent.$vnode;
|
||||||
if (!componentOptions || !componentOptions.children) {
|
// if (!componentOptions || !componentOptions.children) {
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
|
|
||||||
const vnodes = flattenVNodes(componentOptions.children);
|
// const vnodes = flattenVNodes(componentOptions.children);
|
||||||
children.sort((a, b) => vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode));
|
// children.sort((a, b) => vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -94,10 +94,10 @@ module.exports = {
|
|||||||
path: 'image',
|
path: 'image',
|
||||||
title: 'Image 图片',
|
title: 'Image 图片',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: 'col',
|
path: 'col',
|
||||||
// title: 'Layout 布局',
|
title: 'Layout 布局',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'popup',
|
// path: 'popup',
|
||||||
// title: 'Popup 弹出层',
|
// title: 'Popup 弹出层',
|
||||||
@ -441,10 +441,10 @@ module.exports = {
|
|||||||
path: 'image',
|
path: 'image',
|
||||||
title: 'Image',
|
title: 'Image',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: 'col',
|
path: 'col',
|
||||||
// title: 'Layout',
|
title: 'Layout',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'popup',
|
// path: 'popup',
|
||||||
// title: 'Popup',
|
// title: 'Popup',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user