blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/youzan/vant into dev

Browse Source
This commit is contained in:
陈嘉涵 2020-01-14 17:11:50 +08:00
commit 046ce7e2fe
20 changed files with 348 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/action-sheet/README.md
View File

@ -120,7 +120,7 @@ export default {
| description `v2.2.8` | Description above the options | *string* | - |
| overlay | Whether to show overlay | *boolean* | `true` |
| round `v2.0.9` | Whether to show round corner | *boolean* | `true` |
| close-icon `v2.2.13` | Close icon name | *string* | `close` |
| close-icon `v2.2.13` | Close icon name | *string* | `cross` |
| close-on-click-action | Whether to close when click action | *boolean* | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` |

2
src/action-sheet/README.zh-CN.md
View File

@ -130,7 +130,7 @@ export default {
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
| overlay | 是否显示遮罩层 | *boolean* | `true` |
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `close` |
| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `cross` |
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |

6
src/action-sheet/index.tsx
View File

@ -1,6 +1,6 @@
import { createNamespace } from '../utils';
import { emit, inherit } from '../utils/functional';
import { BORDER_TOP, BORDER_BOTTOM } from '../utils/constant';
import { BORDER_TOP } from '../utils/constant';
import { popupMixinProps } from '../mixins/popup';
import Icon from '../icon';
import Popup from '../popup';
@ -51,7 +51,7 @@ function ActionSheet(
function Header() {
if (title) {
return (
<div class={[bem('header'), BORDER_BOTTOM]}>
<div class={bem('header')}>
{title}
<Icon
name={props.closeIcon}
@ -166,7 +166,7 @@ ActionSheet.props = {
},
closeIcon: {
type: String,
default: 'close'
default: 'cross'
},
safeAreaInsetBottom: {
type: Boolean,

4
src/action-sheet/test/__snapshots__/index.spec.js.snap
View File

@ -8,7 +8,7 @@ exports[`callback events 1`] = `
exports[`close-icon prop 1`] = `
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__header van-hairline--bottom">Title<i class="van-icon van-icon-cross van-action-sheet__close">
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
<!----></i></div>
</div>
`;
@ -25,7 +25,7 @@ exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-p
exports[`render title and default slot 1`] = `
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__header van-hairline--bottom">Title<i class="van-icon van-icon-close van-action-sheet__close">
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
<!----></i></div>
<div class="van-action-sheet__content">Default</div>
</div>

30
src/goods-action-icon/index.js
View File

@ -12,6 +12,7 @@ export default createComponent({
...routeProps,
text: String,
icon: String,
color: String,
info: [Number, String],
iconClass: null
},
@ -20,22 +21,31 @@ export default createComponent({
onClick(event) {
this.$emit('click', event);
route(this.$router, this);
},
genIcon() {
const slot = this.slots('icon');
if (slot) {
return <div class={bem('icon')}>{slot}</div>;
}
return (
<Icon
class={[bem('icon'), this.iconClass]}
tag="div"
info={this.info}
name={this.icon}
color={this.color}
/>
);
}
},
render() {
return (
<div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
{this.slots('icon') ? (
<div class={bem('icon')}>{this.slots('icon')}</div>
) : (
<Icon
class={[bem('icon'), this.iconClass]}
tag="div"
info={this.info}
name={this.icon}
/>
)}
{this.genIcon()}
{this.slots() || this.text}
</div>
);

13
src/goods-action/README.md
View File

@ -56,6 +56,18 @@ Use `info` prop to show badge in icon
</van-goods-action>
```
### Custom Icon Color
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
<van-goods-action-icon icon="cart-o" text="Icon2" />
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
<van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" />
</van-goods-action>
```
### Custom Button Color
```html
@ -81,6 +93,7 @@ Use `info` prop to show badge in icon
|------|------|------|------|
| text | Button text | *string* | - |
| icon | Icon | *string* | - |
| color `v2.4.2` | Icon color | *string* | `#323233` |
| icon-class | Icon class name | *any* | `''` |
| info | Content of the badge | *string \| number* | - |
| url | Link | *string* | - |

17
src/goods-action/README.zh-CN.md
View File

@ -56,9 +56,23 @@ export default {
</van-goods-action>
```
### 自定义图标颜色
通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
<van-goods-action-icon icon="cart-o" text="购物车" />
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
<van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
```
### 自定义按钮颜色
通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
```html
<van-goods-action>
@ -83,6 +97,7 @@ export default {
|------|------|------|------|
| text | 按钮文字 | *string* | - |
| icon | 图标 | *string* | - |
| color `v2.4.2` | 图标颜色 | *string* | `#323233` |
| icon-class | 图标额外类名 | *any* | - |
| info | 图标右上角徽标的内容 | *string \| number* | - |
| url | 点击后跳转的链接地址 | *string* | - |

28
src/goods-action/demo/index.vue
View File

@ -10,7 +10,7 @@
</van-goods-action>
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="$t('iconInfo')">
<van-goods-action>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
<van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
@ -20,6 +20,16 @@
</van-goods-action>
</demo-block>
<demo-block v-if="!isWeapp" :title="$t('customIconColor')">
<van-goods-action>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" color="#07c160" />
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
<van-goods-action-icon icon="star" :text="$t('collected')" color="#ff5000" />
<van-goods-action-button type="warning" :text="$t('button1')" />
<van-goods-action-button type="danger" :text="$t('button2')" />
</van-goods-action>
</demo-block>
<demo-block :title="$t('customButtonColor')">
<van-goods-action>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
@ -35,25 +45,29 @@
export default {
i18n: {
'zh-CN': {
clickIcon: '点击图标',
clickButton: '点击按钮',
icon1: '客服',
icon2: '购物车',
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
title2: '徽标提示',
iconInfo: '徽标提示',
collected: '已收藏',
clickIcon: '点击图标',
clickButton: '点击按钮',
customIconColor: '自定义图标颜色',
customButtonColor: '自定义按钮颜色'
},
'en-US': {
clickIcon: 'Click Icon',
clickButton: 'Click Button',
icon1: 'Icon1',
icon2: 'Icon2',
icon3: 'Icon3',
button1: 'Button1',
button2: 'Button2',
title2: 'Icon info',
iconInfo: 'Icon info',
collected: 'Collected',
clickIcon: 'Click Icon',
clickButton: 'Click Button',
customIconColor: 'Custom Icon Color',
customButtonColor: 'Custom Button Color'
}
},

19
src/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -35,6 +35,25 @@ exports[`renders demo correctly 1`] = `
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
</div>
</div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!---->
</div>购物车
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
<!---->
</div>已收藏
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
</div>
</div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">

71
src/sku/README.md
View File

@ -142,6 +142,7 @@ export default {
| get-container | Return the mount node for sku | *string \| () => Element* | - |
| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | *boolean* | `false` |
| start-sale-num `v2.3.0` | Minimum quantity | *number* | `1` |
| properties `2.4.0` | Goods properties | *array* | - |
### Events
@ -151,6 +152,7 @@ export default {
| buy-clicked | Triggered when click buy button | data: object |
| stepper-change | Triggered when stepper value changed | value: number |
| sku-selected | Triggered when select sku | { skuValue, selectedSku, selectedSkuComb } |
| sku-prop-selected | Triggered when select property | { propValue, selectedProp, selectedSkuComb } |
| open-preview | Triggered when open image preview | data: object |
| close-preview | Triggered when close image preview | data: object |
@ -161,7 +163,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance m
| Name | Description | Attribute | Return value |
|------|------|------|------|
| getSkuData | Get current skuData | - | skuData |
| resetSelectedSku | Reset selected sku to initial sku | - | - | 2.3.0 |
| resetSelectedSku `2.3.0` | Reset selected sku to initial sku | - | - |
### Slots
@ -226,10 +228,53 @@ sku: {
placeholder: ''
}
],
hide_stock: false
hide_stock: false,
properties: [
{
k_id: 123,
k: 'More',
is_multiple: true,
v: [
{
id: 1222,
name: 'Tea',
price: 1,
},
{
id: 1223,
name: 'Water',
price: 1,
}
],
}
]
}
```
### properties Data Structure
```javascript
[
{
k_id: 123,
k: 'More',
is_multiple: true,
v: [
{
id: 1222,
name: 'Tea',
price: 1,
},
{
id: 1223,
name: 'Water',
price: 1,
}
],
}
]
```
### initialSku Data Structure
```javascript
@ -238,7 +283,10 @@ sku: {
// Value：skuValueId
s1: '30349',
s2: '1193',
selectedNum: 3
selectedNum: 3,
selectedProp: {
123: [1222]
}
}
```
@ -324,7 +372,22 @@ skuData: {
s1: '30349',
s2: '1193',
s3: '0',
stock_num: 111
stock_num: 111,
properties: [
{
k_id: 123,
k: 'More',
is_multiple: true,
v: [
{
id: 1223,
name: 'Water',
price: 1
}
]
}
],
property_price: 1
}
}
```

53
src/sku/README.zh-CN.md
View File

@ -146,6 +146,7 @@ export default {
| show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | *boolean* | `true` |
| safe-area-inset-bottom `v2.2.1` | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
| start-sale-num `v2.3.0` | 起售数量 | *number* | `1` |
| properties `2.4.0` | 商品属性 | *array* | - |
### Events
@ -155,6 +156,7 @@ export default {
| buy-clicked | 点击购买回调 | skuData: object |
| stepper-change | 购买数量变化时触发 | value: number |
| sku-selected | 切换规格类目时触发 | { skuValue, selectedSku, selectedSkuComb } |
| sku-prop-selected | 切换商品属性时触发 | { propValue, selectedProp, selectedSkuComb } |
| open-preview | 打开商品图片预览时触发 | data: object |
| close-preview | 关闭商品图片预览时触发 | data: object |
@ -240,6 +242,30 @@ sku: {
}
```
### properties 对象结构
```javascript
[ // 商品属性
{
k_id: 123, // 属性id
k: '加料', // 属性名
is_multiple: true, // 是否可多选
v: [
{
id: 1222, // 属性值id
name: '珍珠', // 属性值名
price: 1, // 属性值加价
},
{
id: 1223,
name: '椰果',
price: 1,
}
],
}
]
```
### initialSku 对象结构
```javascript
@ -249,7 +275,13 @@ sku: {
s1: '30349',
s2: '1193',
// 初始选中数量
selectedNum: 3
selectedNum: 3,
// 初始选中的商品属性
// 键：属性id
// 值：属性值id列表
selectedProp: {
123: [1222]
}
}
```
@ -341,7 +373,22 @@ skuData: {
s1: '30349',
s2: '1193',
s3: '0',
stock_num: 111
}
stock_num: 111,
properties: [
{
k_id: 123,
k: '加料',
is_multiple: true,
v: [
{
id: 1223,
name: '椰果',
price: 1
}
]
}
],
property_price: 1
},
}
```

14
src/sku/Sku.js
View File

@ -11,7 +11,14 @@ import SkuStepper from './components/SkuStepper';
import SkuMessages from './components/SkuMessages';
import SkuActions from './components/SkuActions';
import { createNamespace, isDef } from '../utils';
import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues, getSelectedPropValues } from './utils/skuHelper';
import {
isAllSelected,
isSkuChoosable,
getSkuComb,
getSelectedSkuValues,
getSelectedPropValues,
getSelectedProperties,
} from './utils/skuHelper';
import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
const namespace = createNamespace('sku');
@ -38,6 +45,7 @@ export default createComponent({
disableStepperInput: Boolean,
safeAreaInsetBottom: Boolean,
resetSelectedSkuOnHide: Boolean,
properties: Array,
quota: {
type: Number,
default: 0
@ -185,7 +193,7 @@ export default createComponent({
};
}
if (skuComb) {
skuComb.properties = this.selectedPropValues;
skuComb.properties = getSelectedProperties(this.propList, this.selectedProp);
skuComb.property_price = this.selectedPropValues.reduce((acc, cur) => acc + (cur.price || 0), 0);
}
}
@ -220,7 +228,7 @@ export default createComponent({
},
propList() {
return this.sku.properties || [];
return this.properties || [];
},
imageList() {

102
src/sku/demo/data.ts
View File

@ -179,58 +179,58 @@ export const skuData = {
required: 0
}
],
properties: [
{
k_id: 123,
k: '加冰',
v: [
{
id: 1222,
name: '少冰',
price: 1,
},
{
id: 1223,
name: '去冰',
price: 1,
}
],
},
{
k_id: 133,
k: '不知道',
v: [
{
id: 1244,
name: '什么',
price: 9,
}
],
},
{
k_id: 124,
k: '加料',
is_multiple: true,
v: [
{
id: 1224,
name: '布丁',
price: 3,
},
{
id: 1225,
name: '波霸',
price: 4,
},
{
id: 1226,
name: '珍珠',
price: 5,
}
],
}
],
},
properties: [
{
k_id: 123,
k: '加冰',
v: [
{
id: 1222,
name: '少冰',
price: 1,
},
{
id: 1223,
name: '去冰',
price: 1,
}
],
},
{
k_id: 133,
k: '打包',
v: [
{
id: 1244,
name: '分开打包',
price: 9,
}
],
},
{
k_id: 124,
k: '加料',
is_multiple: true,
v: [
{
id: 1224,
name: '布丁',
price: 3,
},
{
id: 1225,
name: '波霸',
price: 4,
},
{
id: 1226,
name: '珍珠',
price: 5,
}
],
}
],
};
export const initialSku = {

4
src/sku/demo/index.vue
View File

@ -15,6 +15,7 @@
:close-on-click-overlay="closeOnClickOverlay"
:message-config="messageConfig"
:custom-sku-validator="customSkuValidator"
:properties="skuData.properties"
disable-stepper-input
reset-stepper-on-hide
safe-area-inset-bottom
@ -46,6 +47,7 @@
:start-sale-num="skuData.start_sale_num"
:custom-stepper-config="customStepperConfig"
:message-config="messageConfig"
:properties="skuData.properties"
hide-quota-text
safe-area-inset-bottom
@buy-clicked="onBuyClicked"
@ -76,6 +78,7 @@
:custom-stepper-config="customStepperConfig"
:message-config="messageConfig"
:show-soldout-sku="false"
:properties="skuData.properties"
hide-quota-text
safe-area-inset-bottom
@buy-clicked="onBuyClicked"
@ -103,6 +106,7 @@
:quota="skuData.quota"
:quota-used="skuData.quota_used"
:start-sale-num="skuData.start_sale_num"
:properties="skuData.properties"
show-add-cart-btn
reset-stepper-on-hide
safe-area-inset-bottom

24
src/sku/utils/skuHelper.js
View File

@ -120,12 +120,33 @@ export const getSelectedPropValues = (propList, selectedProp) => {
const normalizeProp = normalizePropList(propList);
return Object.keys(selectedProp).reduce((acc, cur) => {
selectedProp[cur].forEach(it => {
acc.push(normalizeProp[cur][it]);
acc.push({
...normalizeProp[cur][it],
});
});
return acc;
}, []);
};
export const getSelectedProperties = (propList, selectedProp) => {
const list = [];
(propList || []).forEach(prop => {
if (selectedProp[prop.k_id] && selectedProp[prop.k_id].length > 0) {
const v = [];
prop.v.forEach(it => {
if (selectedProp[prop.k_id].indexOf(it.id) > -1) {
v.push({ ...it });
}
});
list.push({
...prop,
v,
});
}
});
return list;
};
export default {
normalizeSkuTree,
getSkuComb,
@ -133,4 +154,5 @@ export default {
isAllSelected,
isSkuChoosable,
getSelectedPropValues,
getSelectedProperties,
};

2
src/style/var.less
View File

@ -72,7 +72,7 @@
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 18px;
@action-sheet-close-icon-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-sm;
@action-sheet-close-icon-padding: 0 @padding-md;
@action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color;

8
src/switch/README.md
View File

@ -78,6 +78,14 @@ export default {
};
```
### Inside a Cell
```html
<van-cell center title="Title">
<van-switch v-model="checked" slot="right-icon" size="24" />
</van-cell>
```
## API
### Props

8
src/switch/README.zh-CN.md
View File

@ -90,6 +90,14 @@ export default {
};
```
### 搭配单元格使用
```html
<van-cell center title="标题">
<van-switch v-model="checked" slot="right-icon" size="24" />
</van-cell>
```
## API
### Props

28
src/switch/demo/index.vue
View File

@ -17,12 +17,22 @@
</demo-block>
<demo-block :title="$t('customColor')">
<van-switch v-model="checked3" active-color="#07c160" inactive-color="#ee0a24" />
<van-switch
v-model="checked3"
active-color="#07c160"
inactive-color="#ee0a24"
/>
</demo-block>
<demo-block :title="$t('asyncControl')">
<van-switch :value="checked4" @input="onInput" />
</demo-block>
<demo-block :title="$t('withCell')">
<van-cell center :title="$t('title')">
<van-switch v-model="checked5" slot="right-icon" size="24" />
</van-cell>
</demo-block>
</demo-section>
</template>
@ -30,15 +40,19 @@
export default {
i18n: {
'zh-CN': {
title: '提醒',
title: '标题',
confirm: '提醒',
message: '是否切换开关？',
withCell: '搭配单元格使用',
customSize: '自定义大小',
customColor: '自定义颜色',
asyncControl: '异步控制'
},
'en-US': {
title: 'Confirm',
title: 'Title',
confirm: 'Confirm',
message: 'Are you sure to toggle switch?',
withCell: 'Inside a Cell',
customSize: 'Custom Size',
customColor: 'Custom Color',
asyncControl: 'Async Control'
@ -50,7 +64,9 @@ export default {
checked: true,
checked2: true,
checked3: true,
checked4: true
checked4: true,
checked5: true,
checked6: false
};
},
@ -73,10 +89,8 @@ export default {
@import '../../style/var';
.demo-switch {
background: @white;
.van-switch {
margin: 0 @padding-md;
margin-left: @padding-md;
}
}
</style>

8
src/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -34,5 +34,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>标题</span></div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
</div>
</div>
`;