blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

[refactor] 重构layout和card组件为自定义组件 (#185)

Browse Source 
* layout重构

* [refactor] 重构卡片
This commit is contained in:
wny 2018-04-10 20:40:12 +08:00 committed by Yao
parent b8930d972a
commit 7441e8c39b
18 changed files with 240 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/pages/card/index.json
View File

@ -1,3 +1,6 @@
{
"navigationBarTitleText": "Card 卡片"
"navigationBarTitleText": "Card 卡片",
"usingComponents": {
"zan-card": "../../dist/card/index"
}
}

44
example/pages/card/index.wxml
View File

@ -3,33 +3,45 @@
<view class="doc-title zan-hairline--bottom">CARD</view>
<view class="zan-panel">
<view class="zan-card">
<view class="zan-card__thumb">
<zan-card
card-class="test-card"
thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
price="999.99"
title="红烧牛肉【虚拟商品】【有库存】【有sku】"
num="2"
desc="3000克 50%"
status="已发货"
>
</zan-card>
</view>
<view class="doc-title zan-hairline--bottom">使用slot</view>
<view class="zan-panel">
<zan-card
card-class="test-card"
useThumbSlot="{{ true }}"
useDetailSlot="{{ true }}"
>
<view slot="thumb-slot" class="zan-card__thumb">
<image class="zan-card__img"
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
mode="aspectFit"
></image>
</view>
<view class="zan-card__detail">
<!-- 右侧详情 -->
<view slot="detail-slot" class="zan-card__detail">
<view class="zan-card__detail-row">
<view class="zan-card__right-col">¥ 999.99</view>
<view class="zan-card__right-col">x 2</view>
<view class="zan-card__left-col zan-ellipsis--l2">
红烧牛肉【虚拟商品】【有库存】【有sku】
我是标题
</view>
</view>
<view class="zan-card__detail-row zan-c-gray-darker">
<view class="zan-card__right-col">x2</view>
<view class="zan-card__left-col">
3000克 50%
</view>
</view>
<view class="zan-card__detail-row zan-c-gray-darker">
<view class="zan-card__left-col zan-c-red">已发货</view>
<view class="zan-card__left-col">¥ 111</view>
</view>
</view>
</view>
</zan-card>
</view>
</view>

1
example/pages/card/index.wxss Normal file
View File

@ -0,0 +1 @@

6
example/pages/layout/index.json Normal file
View File

@ -0,0 +1,6 @@
{
"usingComponents": {
"zan-row": "../../dist/row/index",
"zan-col": "../../dist/col/index"
}
}

30
example/pages/layout/index.wxml
View File

@ -5,29 +5,23 @@
<view class="zan-panel-title">基础用法</view>
<view class="doc-description">Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度</view>
<view class="zan-panel">
<view class="zan-row">
<view class="zan-col zan-col-8">
span: 8
</view>
<view class="zan-col zan-col-8">
span: 8
</view>
<view class="zan-col zan-col-8">
span: 8
</view>
</view>
<zan-row>
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
</zan-row>
</view>
<view class="zan-panel-title">offset</view>
<view class="doc-description">添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同</view>
<view class="zan-panel">
<view class="zan-row">
<view class="zan-col zan-col-4">span: 4</view>
<view class="zan-col zan-col-10 zan-col-offset-4">offset: 4, span: 10</view>
</view>
<view class="zan-row">
<view class="zan-col zan-col-12 zan-col-offset-12">offset: 12, span: 12</view>
</view>
<zan-row>
<zan-col col="4" col-class="custom-zan-col">span: 4</zan-col>
<zan-col col="10" offset="4" col-class="custom-zan-col">offset: 4, span: 10</zan-col>
</zan-row>
<zan-row>
<zan-col col="12" offset="12" col-class="custom-zan-col">offset: 12, span: 12</zan-col>
</zan-row>
</view>
</view>

4
example/pages/layout/index.wxss
View File

@ -1,4 +1,4 @@
.zan-col {
.custom-zan-col {
line-height: 30px;
text-align: center;
background-color: #39a9ed;
@ -6,6 +6,6 @@
color: #fff;
}
.zan-col:nth-child(even) {
.custom-zan-col:nth-child(even) {
background-color: #66c6f2;
}

76
packages/card/README.md
View File

@ -1,49 +1,71 @@
## Card 卡片
### 使用指南
在 app.wxss 中引入组件库所有样式
```css
@import "path/to/zanui-weapp/dist/index.wxss";
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-card": "path/to/zanui-weapp/dist/card/index"
}
}
```
### 代码演示
#### 基础用法
卡片可以用于左侧图片，右侧描述信息的展示。
`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示
如下，是一个商品信息的展示：
卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。
```html
<view class="zan-card">
<!-- 卡片左侧商品图片 -->
<view class="zan-card__thumb">
<zan-card
card-class="test-card"
thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
price="999.99"
title="红烧牛肉【虚拟商品】【有库存】【有sku】"
num="2"
desc="3000克 50%"
status="已发货"
>
</zan-card>
```
#### 使用slot
`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。
```html
<zan-card
card-class="test-card"
useThumbSlot="{{ true }}"
useDetailSlot="{{ true }}"
>
<view slot="thumb-slot" class="zan-card__thumb">
<image class="zan-card__img"
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
mode="aspectFit"
></image>
</view>
<!-- 卡片右侧详情描述 -->
<view class="zan-card__detail">
<!-- 商品标题行 -->
<!-- 每行可以使用 zan-card__detail-row 来控制展示区域 -->
<!-- 每行里面可以用 zan-card__left-col zan-card__right-col 来控制左右展示 -->
<!-- 右侧详情 -->
<view slot="detail-slot" class="zan-card__detail">
<view class="zan-card__detail-row">
<view class="zan-card__right-col">¥ 999.99</view>
<view class="zan-card__right-col">x 2</view>
<view class="zan-card__left-col zan-ellipsis--l2">
红烧牛肉【虚拟商品】【有库存】【有sku】
我是标题
</view>
</view>
<!-- 商品附属信息展示行 -->
<view class="zan-card__detail-row zan-c-gray-darker">
<view class="zan-card__right-col">x2</view>
<view class="zan-card__left-col">
3000克 50%
</view>
</view>
<!-- 商品操作按钮相关 -->
<view class="zan-card__detail-row zan-c-gray-darker">
<view class="zan-card__left-col zan-c-red">已发货</view>
<view class="zan-card__left-col">¥ 111</view>
</view>
</view>
</view>
</zan-card>
```
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----|-----|-----|-----|
| card-class | 自定义最外层class | String | -
| thumb | 左侧缩略图 | String | -
| price | 商品价格 | String | -
| title | 商品标题 | String | -
| desc | 商品描述 | String | -
| num | 商品数量 | Number | -
| status | 商品状态 | String | -
| useThumbSlot | 是否使用thumb-slot（true时需要添加对应slot） | Boolean | `false`
| useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`

24
packages/card/index.js Normal file
View File

@ -0,0 +1,24 @@
Component({
options: {
multipleSlots: true
},
externalClasses: ['card-class'],
properties: {
useThumbSlot: {
type: Boolean,
value: false
},
useDetailSlot: {
type: Boolean,
value: false
},
thumb: String,
price: String,
title: String,
num: Number,
desc: String,
status: String
}
});

3
packages/card/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

10
packages/card/index.pcss
View File

@ -1,6 +1,9 @@
@import "../color/index.pcss";
@import "../helper/index.pcss";
.zan-card {
display: flex;
margin-left: 0px;
width: auto;
padding: 5px 15px;
overflow: hidden;
position: relative;
@ -10,7 +13,6 @@
.zan-card__thumb {
width: 90px;
height: 90px;
float: left;
position: relative;
margin-left: auto;
margin-right: auto;
@ -31,8 +33,8 @@
}
.zan-card__detail {
margin-left: 100px;
width: auto;
flex: 1;
margin-left: 10px;
position: relative;
}

31
packages/card/index.wxml Normal file
View File

@ -0,0 +1,31 @@
<view class="zan-card card-class">
<!-- 左侧图片 -->
<slot wx:if="{{ useThumbSlot }}" name="thumb-slot"></slot>
<view wx:else class="zan-card__thumb">
<image class="zan-card__img"
src="{{ thumb }}"
mode="aspectFit"
></image>
</view>
<!-- 右侧详情 -->
<slot wx:if="{{ useDetailSlot }}" name="detail-slot"></slot>
<view wx:else class="zan-card__detail">
<view class="zan-card__detail-row">
<view class="zan-card__right-col">¥ {{ price }}</view>
<view class="zan-card__left-col zan-ellipsis--l2">
{{ title }}
</view>
</view>
<view class="zan-card__detail-row zan-c-gray-darker">
<view wx:if="{{ num }}" class="zan-card__right-col">x {{ num }}</view>
<view wx:if="{{ desc }}" class="zan-card__left-col">
{{ desc }}
</view>
</view>
<view wx:if="{{ status }}" class="zan-card__detail-row">
<view class="zan-card__left-col zan-c-red">{{ status }}</view>
</view>
</view>
</view>

20
packages/col/index.js Normal file
View File

@ -0,0 +1,20 @@
Component({
externalClasses: ['col-class'],
relations: {
'../row/index': {
type: 'parent'
}
},
properties: {
col: {
value: 0,
type: Number
},
offset: {
value: 0,
type: Number
}
}
});

3
packages/col/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

1
packages/col/index.wxml Normal file
View File

@ -0,0 +1 @@
<view class="col-class zan-col {{ col ? 'zan-col-' + col : '' }} {{ offset ? 'zan-col-offset-' + offset : '' }}"><slot></slot></view>

60
packages/row/README.md
View File

@ -1,34 +1,48 @@
## Layout 布局
### 使用指南
在 app.wxss 中引入组件库所有样式
```css
@import "path/to/zanui-weapp/dist/index.wxss";
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-row": "path/to/zanui-weapp/dist/row/index",
"zan-col": "path/to/zanui-weapp/dist/col/index"
}
}
```
### 代码演示
Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度
Layout 组件提供了24列栅格，设置 col 属性可以设置元素所占宽度
```html
<view class="zan-row">
<view class="zan-col zan-col-8">
span: 8
</view>
<view class="zan-col zan-col-8">
span: 8
</view>
<view class="zan-col zan-col-8">
span: 8
</view>
</view>
<zan-row>
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
</zan-row>
```
Layout 提供了 offset 功能。添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同
Layout 提供了 offset 功能。设置 offset 属性可以设置列的偏移宽度，计算方式与 span 相同
```html
<view class="zan-row">
<view class="zan-col zan-col-4">span: 4</view>
<view class="zan-col zan-col-10 zan-col-offset-4">offset: 4, span: 10</view>
</view>
<view class="zan-row">
<view class="zan-col zan-col-12 zan-col-offset-12">offset: 12, span: 12</view>
</view>
<zan-row row-class="custom-zan-row">
<zan-col col="4" col-class="custom-zan-col">span: 4</zan-col>
<zan-col col="10" offset="4" col-class="custom-zan-col">offset: 4, span: 10</zan-col>
</zan-row>
<zan-row>
<zan-col col="12" offset="12" col-class="custom-zan-col">offset: 12, span: 12</zan-col>
</zan-row>
```
### API
#### Row
| 参数 | 说明 | 类型 | 默认值 |
|-----|-----|-----|-----|
| row-class | 自定义row class | String | -
#### Col
| 参数 | 说明 | 类型 | 默认值 |
|-----|-----|-----|-----|
| col-class | 自定义col class | String | -
| col | 元素所占宽度 | Number | `0`
| offset | 元素偏移宽度 | Number | `0`

9
packages/row/index.js Normal file
View File

@ -0,0 +1,9 @@
Component({
externalClasses: ['row-class'],
relations: {
'../col/index': {
type: 'child'
}
}
});

3
packages/row/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

1
packages/row/index.wxml Normal file
View File

@ -0,0 +1 @@
<view class="row-class zan-row"><slot></slot></view>