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] 重构badge为自定义组件 (#160)

Browse Source
This commit is contained in:
wny 2018-03-24 21:24:51 +08:00 committed by Yao
parent b01af0f886
commit eba84e6f02
9 changed files with 135 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,6 @@
{
"navigationBarTitleText": "Badge 徽章"
"navigationBarTitleText": "Badge 徽章",
"usingComponents": {
"zan-badge": "../../dist/badge/index"
}
}

20
example/pages/badge/index.wxml
View File

@ -4,22 +4,22 @@
<view class="demo">
<view class="demo__item">
<view class="demo__icon zan-badge">
<view class="demo__icon">
<zan-badge>9</zan-badge>
</view>
</view>
<view class="demo__item">
<view class="demo__icon zan-badge">
<view class="zan-badge__count">9</view>
<view class="demo__icon">
<zan-badge>19</zan-badge>
</view>
</view>
<view class="demo__item">
<view class="demo__icon zan-badge">
<view class="zan-badge__count">19</view>
</view>
</view>
<view class="demo__item">
<view class="demo__icon zan-badge">
<view class="zan-badge__count">99+</view>
<view class="demo__icon">
<zan-badge
background-color="#4b0"
box-shadow="none"
font-size="{{ 12 }}"
>99+</zan-badge>
</view>
</view>
</view>

3
example/pages/badge/index.wxss
View File

@ -1,6 +1,7 @@
.demo {
padding: 40px 0;
padding: 40px 10px;
display: flex;
flex-wrap: wrap;
}
.demo__item {
flex: 1;

36
packages/badge/README.md
View File

@ -1,15 +1,33 @@
## Badge 徽章
### 使用指南
在 app.wxss 中引入组件库所有样式
```css
@import "path/to/zanui-weapp/dist/index.wxss";
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-badge": "path/to/zanui-weapp/dist/badge/index"
}
}
```
### 代码演示
#### 基础用法
```html
<view class="badge-container zan-badge">
<view class="zan-badge__count">10</view>
<view class="badge-container">
<zan-badge>10</zan-badge>
</view>
```
#### 自定义参数
```html
<view class="badge-container">
<zan-badge
color="{{ color }}"
background-color="{{ backgroundColor }}"
font-size="{{ fontSize }}"
box-shadow="{{ boxShadow }}"
>10</zan-badge>
</view>
```
@ -19,3 +37,11 @@
height: 100px;
}
```
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----|-----|-----|-----|
| color | 字体颜色 | String | `#fff`
| background-color | 背景颜色 | String | `#f44`
| font-size | 字体大小 | Number | 10
| box-shadow | 为了更好的控制宽度，使用了box-shadow来实现badge的边框，可以根据box-shadow的语法自行修改颜色和宽度 | String | `0 0 0 2px #fff`

25
packages/badge/index.js Normal file
View File

@ -0,0 +1,25 @@
const DEFAULT_COLOR = '#fff';
const DEFAULT_BACKGROUND_COLOR = '#f44';
const DEFAULT_FONT_SIZE = 10;
const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff';
Component({
properties: {
color: {
type: String,
value: DEFAULT_COLOR
},
backgroundColor: {
type: String,
value: DEFAULT_BACKGROUND_COLOR
},
fontSize: {
type: Number,
value: DEFAULT_FONT_SIZE
},
boxShadow: {
type: String,
value: DEFAULT_BOX_SHADOW
}
}
});

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

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

6
packages/badge/index.pcss
View File

@ -1,9 +1,9 @@
.zan-badge {
position: relative;
}
.zan-badge__count {
.zan-badge__text {
position: absolute;
top: -16px;
top: -0.8em;
right: 0px;
height: 1.6em;
min-width: 1.6em;
@ -11,7 +11,7 @@
padding: 0 .4em;
font-size: 20px;
border-radius: .8em;
background: #FF4444;
background: #f44;
color: #fff;
text-align: center;
white-space: nowrap;

8
packages/badge/index.wxml Normal file
View File

@ -0,0 +1,8 @@
<view class="zan-badge">
<text
class="zan-badge__text"
style="color: {{ color }}; background-color: {{ backgroundColor }};font-size: {{ fontSize * 2 }}px; box-shadow: {{ boxShadow }};"
>
<slot></slot>
</text>
</view>

54
yarn.lock
View File

@ -1180,6 +1180,10 @@ binary-extensions@^1.0.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
binaryextensions@~1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/binaryextensions/-/binaryextensions-1.0.1.tgz#1e637488b35b58bda5f4774bf96a5212a8c90755"
block-stream@*:
version "0.0.9"
resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@ -1982,6 +1986,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
cross-env@^5.1.4:
version "5.1.4"
resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.1.4.tgz#f61c14291f7cc653bb86457002ea80a04699d022"
dependencies:
cross-spawn "^5.1.0"
is-windows "^1.0.0"
cross-spawn@^5.0.1, cross-spawn@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@ -2655,7 +2666,7 @@ escape-html@~1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@ -3656,10 +3667,24 @@ gulp-postcss@^7.0.0:
postcss-load-config "^1.2.0"
vinyl-sourcemaps-apply "^0.2.1"
gulp-remove-logging@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/gulp-remove-logging/-/gulp-remove-logging-1.2.0.tgz#fd16c19d368e243430126c619a393363e2cfe5a6"
dependencies:
gulp-replace "0.5.4"
gulp-rename@^1.2.2:
version "1.2.2"
resolved "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817"
gulp-replace@0.5.4:
version "0.5.4"
resolved "https://registry.npmjs.org/gulp-replace/-/gulp-replace-0.5.4.tgz#69a67914bbd13c562bff14f504a403796aa0daa9"
dependencies:
istextorbinary "1.0.2"
readable-stream "^2.0.1"
replacestream "^4.0.0"
gulp-util@3.0.8, gulp-util@^3.0.0, gulp-util@^3.0.8:
version "3.0.8"
resolved "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@ -4446,14 +4471,14 @@ is-whitespace@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
is-windows@^1.0.0, is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
is-windows@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
is-wsl@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@ -4547,6 +4572,13 @@ istanbul-reports@^1.1.4:
dependencies:
handlebars "^4.0.3"
istextorbinary@1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/istextorbinary/-/istextorbinary-1.0.2.tgz#ace19354d1a9a0173efeb1084ce0f87b0ad7decf"
dependencies:
binaryextensions "~1.0.0"
textextensions "~1.0.0"
jest-changed-files@^22.2.0:
version "22.2.0"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.2.0.tgz#517610c4a8ca0925bdc88b0ca53bd678aa8d019e"
@ -7362,6 +7394,14 @@ replace-ext@0.0.1:
version "0.0.1"
resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
replacestream@^4.0.0:
version "4.0.3"
resolved "https://registry.npmjs.org/replacestream/-/replacestream-4.0.3.tgz#3ee5798092be364b1cdb1484308492cb3dff2f36"
dependencies:
escape-string-regexp "^1.0.3"
object-assign "^4.0.1"
readable-stream "^2.0.2"
request-promise-core@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
@ -8219,6 +8259,10 @@ text-table@^0.2.0, text-table@~0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
textextensions@~1.0.0:
version "1.0.2"
resolved "https://registry.npmjs.org/textextensions/-/textextensions-1.0.2.tgz#65486393ee1f2bb039a60cbba05b0b68bd9501d2"
throat@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"