mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
Merge branch 'dev'
This commit is contained in:
rex-zsd
commit
4c944ba03b
1
.npmignore
Normal file
1
.npmignore
Normal file
@ -0,0 +1 @@
|
||||
changelog.generated.md
|
||||
@ -1,5 +1,31 @@
|
||||
## 更新日志
|
||||
|
||||
## [v0.4.9](https://github.com/youzan/vant-weapp/tree/v0.4.9)
|
||||
`2018-12-07`
|
||||
|
||||
**Improvements**
|
||||
|
||||
- Tab: 新增 sticky 属性 [\#1019](https://github.com/youzan/vant-weapp/pull/1019)
|
||||
- Tab: 新增 swipeable 属性 [\#1019](https://github.com/youzan/vant-weapp/pull/1019)
|
||||
- Rate: 新增 icon-class 外部样式类 [\#1026](https://github.com/youzan/vant-weapp/pull/1026)
|
||||
- Icon: 优化内部 setData 次数 [\#1009](https://github.com/youzan/vant-weapp/pull/1009)
|
||||
- Popup: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
|
||||
- Tabbar: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
|
||||
- SubmitBar: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
|
||||
- ActionSheet: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
|
||||
- GoodsAction: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 Collapse 箭头方向错误 [\#1014](https://github.com/youzan/vant-weapp/pull/1014)
|
||||
- 修复 Steps 在开发者工具体验评分中提示选择器错误的问题 [\#1015](https://github.com/youzan/vant-weapp/pull/1015)
|
||||
- 修复 Stepper 动态设置 value 时禁用状态未更新的问题 [\#1022](https://github.com/youzan/vant-weapp/pull/1022)
|
||||
- 修复 Popup 在 iOS 8 下动画错误的问题 [\#1008](https://github.com/youzan/vant-weapp/pull/1008) [\#1029](https://github.com/youzan/vant-weapp/pull/1029)
|
||||
- 修复 Transition 在 iOS 8 下动画错误的问题 [\#1008](https://github.com/youzan/vant-weapp/pull/1008) [\#1029](https://github.com/youzan/vant-weapp/pull/1029)
|
||||
- 修复 DatetimePicker 动态设置 type 后报错的问题 [\#1004](https://github.com/youzan/vant-weapp/pull/1004)
|
||||
- 修复劫持 setData 方法导致无法适配支付宝小程序的问题 [\#1023](https://github.com/youzan/vant-weapp/pull/1023)
|
||||
|
||||
|
||||
## [v0.4.8](https://github.com/youzan/vant-weapp/tree/v0.4.8)
|
||||
`2018-12-03`
|
||||
|
||||
|
||||
@ -37,7 +37,8 @@
|
||||
"pages/swipe-cell/index",
|
||||
"pages/datetime-picker/index",
|
||||
"pages/rate/index",
|
||||
"pages/collapse/index"
|
||||
"pages/collapse/index",
|
||||
"pages/picker/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#f8f8f8",
|
||||
@ -94,6 +95,7 @@
|
||||
"van-datetime-picker": "../../dist/datetime-picker/index",
|
||||
"van-rate": "../../dist/rate/index",
|
||||
"van-collapse": "../../dist/collapse/index",
|
||||
"van-collapse-item": "../../dist/collapse-item/index"
|
||||
"van-collapse-item": "../../dist/collapse-item/index",
|
||||
"van-picker": "../../dist/picker/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,6 +43,10 @@ export default [
|
||||
path: '/field',
|
||||
title: 'Field 输入框'
|
||||
},
|
||||
{
|
||||
path: '/picker',
|
||||
title: 'Picker 选择器'
|
||||
},
|
||||
{
|
||||
path: '/radio',
|
||||
title: 'Radio 单选框'
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="199" />
|
||||
<van-badge title="标签名称" info="99+" />
|
||||
</van-badge-group>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
@ -34,5 +34,4 @@
|
||||
<van-button size="small" class="demo-margin-right">小型按钮</van-button>
|
||||
<van-button size="mini">迷你按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
</demo-section>
|
||||
|
||||
@ -9,6 +9,15 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="没有商品图片">
|
||||
<van-card
|
||||
num="2"
|
||||
price="2.00"
|
||||
desc="描述信息"
|
||||
title="商品标题"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="高级用法">
|
||||
<van-card
|
||||
num="2"
|
||||
@ -22,9 +31,9 @@
|
||||
<view slot="tags">
|
||||
<van-tag plain type="danger">满减</van-tag>
|
||||
</view>
|
||||
<view slot="footer">
|
||||
<van-button size="mini" custom-class="button">按钮</van-button>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
<view slot="footer" class="van-card__footer">
|
||||
<van-button size="mini" round custom-class="button">按钮</van-button>
|
||||
<van-button size="mini" round>按钮</van-button>
|
||||
</view>
|
||||
</van-card>
|
||||
</demo-block>
|
||||
|
||||
@ -6,3 +6,7 @@
|
||||
.button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.van-card__footer {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@ -1,37 +1,31 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
|
||||
<van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item
|
||||
title="{{ title3 }}"
|
||||
content-class="van-collapse-item__content"
|
||||
disabled
|
||||
>
|
||||
{{ content3 }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="手风琴">
|
||||
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
|
||||
<van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义标题内容">
|
||||
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange">
|
||||
<van-collapse-item content-class="van-collapse-item__content">
|
||||
<van-collapse-item>
|
||||
<view slot="title">{{ title1 }}<van-icon name="question" custom-class="van-icon-question" /></view>
|
||||
{{ content1 }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
title="{{ title2 }}"
|
||||
content-class="van-collapse-item__content"
|
||||
|
||||
value="内容"
|
||||
icon="shop"
|
||||
>{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
.van-collapse-item__content {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.van-icon-question {
|
||||
margin-left: 5px;
|
||||
font-size: 15px !important;
|
||||
|
||||
48
example/pages/picker/index.js
Normal file
48
example/pages/picker/index.js
Normal file
@ -0,0 +1,48 @@
|
||||
import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
column2: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' }
|
||||
],
|
||||
column3: {
|
||||
浙江: ['杭州', { text: '宁波' }, { text: '温州', disabled: true }, '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州']
|
||||
},
|
||||
column4: [
|
||||
{
|
||||
values: ['浙江', '福建'],
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onChange1(event) {
|
||||
const { value, index } = event.detail;
|
||||
Toast(`Value: ${value}, Index：${index}`);
|
||||
},
|
||||
|
||||
onConfirm(event) {
|
||||
const { value, index } = event.detail;
|
||||
Toast(`Value: ${value}, Index：${index}`);
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
Toast('取消');
|
||||
},
|
||||
|
||||
onChange2(event) {
|
||||
const { picker, value } = event.detail;
|
||||
picker.setColumnValues(1, this.data.column3[value[0]]);
|
||||
getApp().picker = picker;
|
||||
}
|
||||
});
|
||||
3
example/pages/picker/index.json
Normal file
3
example/pages/picker/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "Picker 选择器"
|
||||
}
|
||||
39
example/pages/picker/index.wxml
Normal file
39
example/pages/picker/index.wxml
Normal file
@ -0,0 +1,39 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-picker
|
||||
columns="{{ column1 }}"
|
||||
bind:change="onChange1"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用选项">
|
||||
<van-picker
|
||||
columns="{{ column2 }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="展示顶部栏">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
title="标题"
|
||||
columns="{{ column1 }}"
|
||||
bind:change="onChange1"
|
||||
bind:confirm="onConfirm"
|
||||
bind:cancel="onCancel"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="多列联动">
|
||||
<van-picker
|
||||
columns="{{ column4 }}"
|
||||
bind:change="onChange2"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="加载状态">
|
||||
<van-picker
|
||||
loading
|
||||
columns="{{ column4 }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
0
example/pages/picker/index.wxss
Normal file
0
example/pages/picker/index.wxss
Normal file
@ -1 +1 @@
|
||||
/* pages/stepper/index.wxss */
|
||||
/* pages/stepper/index.wxss */
|
||||
|
||||
@ -21,12 +21,27 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="高级用法" padding>
|
||||
<demo-block title="自定义大小" padding>
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
size="24px"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="异步控制" padding>
|
||||
<van-switch
|
||||
checked="{{ checked2 }}"
|
||||
size="36px"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
bind:change="onChange2"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<demo-block title="自定义图标">
|
||||
<van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
|
||||
<van-tabbar-item>
|
||||
<van-tabbar-item info="3">
|
||||
<span>自定义</span>
|
||||
<image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
|
||||
<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标签大小" padding>
|
||||
|
||||
@ -27,5 +27,13 @@ export default {
|
||||
}, {
|
||||
text: '苏州',
|
||||
id: 8
|
||||
}],
|
||||
pro3Name: '福建',
|
||||
pro3: [{
|
||||
text: '泉州',
|
||||
id: 9
|
||||
}, {
|
||||
text: '厦门',
|
||||
id: 10
|
||||
}]
|
||||
};
|
||||
|
||||
@ -17,6 +17,10 @@ Page({
|
||||
}, {
|
||||
text: config.pro2Name,
|
||||
children: config.pro2
|
||||
}, {
|
||||
text: config.pro3Name,
|
||||
disabled: true,
|
||||
children: config.pro3
|
||||
}
|
||||
],
|
||||
mainActiveIndex: 0,
|
||||
|
||||
@ -5,5 +5,6 @@
|
||||
active-id="{{ activeId }}"
|
||||
bind:click-item="onClickItem"
|
||||
bind:click-nav="onClickNav"
|
||||
content-item-class="content-item-class"
|
||||
></van-tree-select>
|
||||
</demo-block>
|
||||
|
||||
@ -1 +1 @@
|
||||
/* pages/tree-select/index.wxss */
|
||||
/* pages/tree-select/index.wxss */
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { iphonex } from '../mixins/iphonex';
|
||||
|
||||
VantComponent({
|
||||
mixins: [iphonex],
|
||||
|
||||
props: {
|
||||
show: Boolean,
|
||||
title: String,
|
||||
@ -20,10 +23,6 @@ VantComponent({
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -57,11 +57,10 @@
|
||||
|
||||
&__item {
|
||||
padding: 0 5px;
|
||||
color: @gray-dark;
|
||||
color: @text-color;
|
||||
|
||||
&--selected {
|
||||
font-weight: 500;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
|
||||
@ -33,13 +33,6 @@ VantComponent({
|
||||
columns: []
|
||||
},
|
||||
|
||||
computed: {
|
||||
displayColumns() {
|
||||
const { columns = [], columnsNum } = this.data;
|
||||
return columns.slice(0, +columnsNum);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.code = value;
|
||||
@ -68,7 +61,8 @@ VantComponent({
|
||||
|
||||
onChange(event: Weapp.Event) {
|
||||
const { value } = event.detail;
|
||||
const { pickerValue, displayColumns } = this.data;
|
||||
const { pickerValue } = this.data;
|
||||
const displayColumns = this.getDisplayColumns();
|
||||
const index = pickerValue.findIndex(
|
||||
(item, index) => item !== value[index]
|
||||
);
|
||||
@ -159,7 +153,8 @@ VantComponent({
|
||||
},
|
||||
|
||||
getValues() {
|
||||
const { displayColumns = [], pickerValue = [] } = this.data;
|
||||
const { pickerValue = [] } = this.data;
|
||||
const displayColumns = this.getDisplayColumns();
|
||||
return displayColumns
|
||||
.map((option, index) => option[pickerValue[index]])
|
||||
.filter(value => !!value);
|
||||
@ -201,6 +196,11 @@ VantComponent({
|
||||
reset() {
|
||||
this.code = '';
|
||||
this.setValues();
|
||||
},
|
||||
|
||||
getDisplayColumns() {
|
||||
const { columns = [], columnsNum } = this.data;
|
||||
return columns.slice(0, +columnsNum);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
class="van-picker__columns"
|
||||
>
|
||||
<picker-view-column
|
||||
wx:for="{{ displayColumns }}"
|
||||
wx:if="{{ rowIndex < columnsNum }}"
|
||||
wx:for="{{ columns }}"
|
||||
wx:for-item="row"
|
||||
wx:for-index="rowIndex"
|
||||
wx:key="rowIndex"
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="199" />
|
||||
<van-badge title="标签名称" info="99+" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-info": "../info/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,20 +36,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
color: @white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transform: scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: @red;
|
||||
&__text {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ VantComponent({
|
||||
},
|
||||
|
||||
props: {
|
||||
info: Number,
|
||||
info: null,
|
||||
title: String
|
||||
},
|
||||
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
|
||||
<view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
|
||||
{{ title }}
|
||||
<view class="van-badge__text">
|
||||
<van-info
|
||||
wx:if="{{ info !== null }}"
|
||||
info="{{ info }}"
|
||||
custom-style="right: 4px"
|
||||
/>
|
||||
{{ title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -24,21 +24,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes(): string {
|
||||
const { type, size, block, plain, round, square, loading, disabled } = this.data;
|
||||
return this.classNames('van-button', `van-button--${type}`, `van-button--${size}`, {
|
||||
'van-button--block': block,
|
||||
'van-button--round': round,
|
||||
'van-button--plain': plain,
|
||||
'van-button--square': square,
|
||||
'van-button--loading': loading,
|
||||
'van-button--disabled': disabled,
|
||||
'van-button--unclickable': disabled || loading
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<button
|
||||
id="{{ id }}"
|
||||
lang="{{ lang }}"
|
||||
class="custom-class {{ classes }}"
|
||||
class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, unclickable: disabled || loading }]) }}"
|
||||
open-type="{{ openType }}"
|
||||
session-from="{{ sessionFrom }}"
|
||||
app-parameter="{{ appParameter }}"
|
||||
|
||||
@ -24,7 +24,8 @@
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
可以通过具名`slot`添加定制内容
|
||||
|
||||
可以通过插槽添加定制内容
|
||||
|
||||
```html
|
||||
<van-card
|
||||
@ -47,7 +48,7 @@
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| thumb | 左侧图片 | `String` | - |
|
||||
| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | `String` | `scaleToFill` |
|
||||
| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | `String` | `aspectFit` |
|
||||
| title | 标题 | `String` | - |
|
||||
| desc | 描述 | `String` | - |
|
||||
| tag | 标签 | `String` | - |
|
||||
@ -58,7 +59,7 @@
|
||||
| currency | 货币符号 | `String` | `¥` |
|
||||
| thumb-link | 点击左侧图片后的跳转链接 | `String` | - |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
|
||||
| lazy-load | 是否开启图片懒加载 | `String` | `false` |
|
||||
| lazy-load | 是否开启图片懒加载 | `Boolean` | `false` |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-card {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
padding: 5px 15px;
|
||||
font-size: 12px;
|
||||
color: @text-color;
|
||||
padding: 5px 15px 5px 115px;
|
||||
background: @background-color-light;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&--center {
|
||||
align-items: center;
|
||||
@ -15,11 +16,15 @@
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-right: 10px;
|
||||
flex: none;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
@ -27,49 +32,52 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&,
|
||||
&__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 90px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__desc {
|
||||
line-height: 20px;
|
||||
line-height: 17px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-height: 40px;
|
||||
max-height: 34px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
max-height: 20px;
|
||||
max-height: 17px;
|
||||
color: @gray-darker;
|
||||
}
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
min-width: 0; // hack for flex box ellipsis
|
||||
&__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
&__right {
|
||||
flex: none;
|
||||
padding-left: 10px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
&__price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
&__origin-price {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: 10px;
|
||||
color: @gray-darker;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__num {
|
||||
color: @gray-darker;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
@ -79,12 +87,8 @@
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ VantComponent({
|
||||
originPrice: String,
|
||||
thumbMode: {
|
||||
type: String,
|
||||
value: 'scaleToFill'
|
||||
value: 'aspectFit'
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
lazy-load="{{ lazyLoad }}"
|
||||
class="van-card__img thumb-class"
|
||||
/>
|
||||
<slot wx:else name="thumb" />
|
||||
<slot name="thumb" />
|
||||
<van-tag
|
||||
wx:if="{{ tag }}"
|
||||
mark
|
||||
@ -19,16 +19,15 @@
|
||||
</view>
|
||||
|
||||
<view class="van-card__content">
|
||||
<view class="van-card__left">
|
||||
<view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
|
||||
<slot wx:else name="title" />
|
||||
<view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
|
||||
<slot wx:else name="title" />
|
||||
|
||||
<view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
|
||||
<slot wx:else name="desc" />
|
||||
<view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
|
||||
<slot wx:else name="desc" />
|
||||
|
||||
<slot name="tags" />
|
||||
</view>
|
||||
<view class="van-card__right">
|
||||
<slot name="tags" />
|
||||
|
||||
<view class="van-card__bottom">
|
||||
<view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
|
||||
<view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
|
||||
<view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
|
||||
|
||||
@ -30,24 +30,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
cellClass(): string {
|
||||
const { data } = this;
|
||||
return this.classNames('van-cell', {
|
||||
'van-cell--center': data.center,
|
||||
'van-cell--required': data.required,
|
||||
'van-cell--borderless': !data.border,
|
||||
'van-cell--clickable': data.isLink || data.clickable,
|
||||
[`van-cell--${data.size}`]: data.size
|
||||
});
|
||||
},
|
||||
|
||||
titleStyle(): string {
|
||||
const { titleWidth } = this.data;
|
||||
return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
this.$emit('click', event.detail);
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ cellClass }}"
|
||||
class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
|
||||
style="{{ customStyle }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
@ -12,7 +14,7 @@
|
||||
<slot wx:else name="icon" />
|
||||
|
||||
<view
|
||||
style="{{ titleStyle }}"
|
||||
style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
|
||||
class="van-cell__title title-class"
|
||||
>
|
||||
<block wx:if="{{ title }}">
|
||||
|
||||
@ -16,9 +16,9 @@ VantComponent({
|
||||
},
|
||||
|
||||
props: {
|
||||
max: Number,
|
||||
value: Array,
|
||||
disabled: Boolean,
|
||||
max: Number
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
@checkbox-size: 20px;
|
||||
|
||||
.van-checkbox {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
@ -14,15 +12,15 @@
|
||||
}
|
||||
|
||||
&__icon {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 1px solid @gray-light;
|
||||
color: transparent;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @checkbox-border-color;
|
||||
transition: @checkbox-transition-duration;
|
||||
|
||||
&--round {
|
||||
border-radius: 100%;
|
||||
@ -30,28 +28,31 @@
|
||||
|
||||
&--checked {
|
||||
color: @white;
|
||||
border-color: @blue;
|
||||
background-color: @blue;
|
||||
border-color: @checkbox-checked-icon-color;
|
||||
background-color: @checkbox-checked-icon-color;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
border-color: @border-color;
|
||||
background-color: currentColor;
|
||||
color: @background-color;
|
||||
border-color: @checkbox-disabled-icon-color;
|
||||
background-color: @checkbox-disabled-background-color;
|
||||
}
|
||||
|
||||
&--disabled&--checked {
|
||||
border-color: @border-color;
|
||||
background-color: @border-color;
|
||||
color: @checkbox-disabled-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-left: 10px;
|
||||
color: @checkbox-label-color;
|
||||
margin-left: @checkbox-label-margin;
|
||||
|
||||
&--left {
|
||||
margin: 0 10px 0 0;
|
||||
float: left;
|
||||
margin: 0 @checkbox-label-margin 0 0;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: @checkbox-disabled-label-color;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
||||
@ -23,28 +23,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconClass(): string {
|
||||
const { disabled, value, shape } = this.data;
|
||||
return this.classNames(
|
||||
'van-checkbox__icon',
|
||||
`van-checkbox__icon--${shape}`,
|
||||
{
|
||||
'van-checkbox__icon--disabled': disabled,
|
||||
'van-checkbox__icon--checked': value
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
iconStyle(): string {
|
||||
const { value, disabled, checkedColor } = this.data;
|
||||
if (checkedColor && value && !disabled) {
|
||||
return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
emitChange(value) {
|
||||
const parent = this.getRelationNodes('../checkbox-group/index')[0];
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-checkbox custom-class">
|
||||
<view class="van-checkbox__icon-wrap" bindtap="toggle">
|
||||
<slot wx:if="{{ useIconSlot }}" name="icon" />
|
||||
<van-icon
|
||||
wx:else
|
||||
name="success"
|
||||
class="{{ iconClass }}"
|
||||
style="{{ iconStyle }}"
|
||||
class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
|
||||
style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
|
||||
custom-class="icon-class"
|
||||
custom-style="line-height: 20px;"
|
||||
/>
|
||||
</view>
|
||||
<view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
|
||||
<view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -15,16 +15,6 @@ VantComponent({
|
||||
style: ''
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes(): string {
|
||||
const { span, offset } = this.data;
|
||||
return this.classNames('van-col', {
|
||||
[`van-col--${span}`]: span,
|
||||
[`van-col--offset-${offset}`]: offset
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setGutter(gutter: number) {
|
||||
const padding = `${gutter / 2}px`;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ classes }}"
|
||||
class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
|
||||
style="{{ style }}"
|
||||
>
|
||||
<slot />
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
&__title {
|
||||
.van-cell__right-icon {
|
||||
transform: rotate(90deg);
|
||||
transition: 0.3s;
|
||||
transition: @collapse-item-transition-duration;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
@ -14,12 +14,12 @@
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
& .van-cell,
|
||||
& .van-cell__right-icon {
|
||||
color: @gray !important;
|
||||
.van-cell,
|
||||
.van-cell__right-icon {
|
||||
color: @collapse-item-title-disabled-color !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.van-cell:active {
|
||||
background-color: @white !important;
|
||||
}
|
||||
}
|
||||
@ -28,11 +28,14 @@
|
||||
&__wrapper {
|
||||
overflow: hidden;
|
||||
will-change: max-height;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
transition: max-height @collapse-item-transition-duration ease-in-out;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 15px;
|
||||
background-color: @white;
|
||||
color: @collapse-item-content-text-color;
|
||||
padding: @collapse-item-content-padding;
|
||||
font-size: @collapse-item-content-font-size;
|
||||
line-height: @collapse-item-content-line-height;
|
||||
background-color: @collapse-item-content-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,11 +12,11 @@ VantComponent({
|
||||
},
|
||||
|
||||
props: {
|
||||
name: [String, Number],
|
||||
name: null,
|
||||
title: null,
|
||||
value: null,
|
||||
icon: String,
|
||||
label: String,
|
||||
title: [String, Number],
|
||||
value: [String, Number],
|
||||
disabled: Boolean,
|
||||
border: {
|
||||
type: Boolean,
|
||||
@ -33,16 +33,6 @@ VantComponent({
|
||||
expanded: false
|
||||
},
|
||||
|
||||
computed: {
|
||||
titleClass() {
|
||||
const { disabled, expanded } = this.data;
|
||||
return this.classNames('van-collapse-item__title', {
|
||||
'van-collapse-item__title--disabled': disabled,
|
||||
'van-collapse-item__title--expanded': expanded
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateExpanded() {
|
||||
if (!this.parent) {
|
||||
@ -68,11 +58,9 @@ VantComponent({
|
||||
|
||||
updateStyle(expanded) {
|
||||
if (expanded) {
|
||||
this.getRect('.van-collapse-item__content').then(res => {
|
||||
this.set({
|
||||
contentHeight: res.height ? res.height + 'px' : null
|
||||
this.set({
|
||||
contentHeight: 'auto'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.set({
|
||||
contentHeight: 0
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-collapse-item van-hairline--top custom-class">
|
||||
<van-cell
|
||||
title="{{ title }}"
|
||||
@ -6,7 +8,7 @@
|
||||
value="{{ value }}"
|
||||
label="{{ label }}"
|
||||
border="{{ border && expanded }}"
|
||||
class="{{ titleClass }}"
|
||||
class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
|
||||
right-icon-class="van-cell__right-icon"
|
||||
custom-class="van-cell"
|
||||
bind:click="onClick"
|
||||
|
||||
@ -32,6 +32,11 @@
|
||||
Page({
|
||||
data: {
|
||||
activeNames: ['1']
|
||||
},
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
activeNames: event.detail
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -57,6 +62,11 @@ Page({
|
||||
Page({
|
||||
data: {
|
||||
activeName: '1'
|
||||
},
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
activeNames: event.detail
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -75,7 +85,18 @@ Page({
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
|
||||
``` javascript
|
||||
Page({
|
||||
data: {
|
||||
activeName: ['1']
|
||||
},
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
activeNames: event.detail
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Collapse API
|
||||
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
const hasOwn = {}.hasOwnProperty;
|
||||
|
||||
export function classNames(): string {
|
||||
const classes = [];
|
||||
|
||||
for (let i = 0; i < arguments.length; i++) {
|
||||
const arg = arguments[i];
|
||||
if (!arg) continue;
|
||||
|
||||
const argType = typeof arg;
|
||||
|
||||
if (argType === 'string' || argType === 'number') {
|
||||
classes.push(arg);
|
||||
} else if (Array.isArray(arg) && arg.length) {
|
||||
const inner = classNames.apply(null, arg);
|
||||
if (inner) {
|
||||
classes.push(inner);
|
||||
}
|
||||
} else if (argType === 'object') {
|
||||
for (const key in arg) {
|
||||
if (hasOwn.call(arg, key) && arg[key]) {
|
||||
classes.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
};
|
||||
@ -37,11 +37,58 @@
|
||||
@button-bottom-action-primary-color: @white;
|
||||
@button-bottom-action-primary-background-color: @red;
|
||||
|
||||
// Checkbox
|
||||
@checkbox-size: 20px;
|
||||
@checkbox-border-color: @gray-light;
|
||||
@checkbox-transition-duration: .2s;
|
||||
@checkbox-label-margin: 10px;
|
||||
@checkbox-label-color: @text-color;
|
||||
@checkbox-checked-icon-color: @blue;
|
||||
@checkbox-disabled-icon-color: @gray;
|
||||
@checkbox-disabled-label-color: @gray;
|
||||
@checkbox-disabled-background-color: @border-color;
|
||||
|
||||
// Collapse
|
||||
@collapse-item-transition-duration: .3s;
|
||||
@collapse-item-content-padding: 15px;
|
||||
@collapse-item-content-font-size: 13px;
|
||||
@collapse-item-content-line-height: 1.5;
|
||||
@collapse-item-content-text-color: @gray-dark;
|
||||
@collapse-item-content-background-color: @white;
|
||||
@collapse-item-title-disabled-color: @gray;
|
||||
|
||||
// Info
|
||||
@info-size: 16px;
|
||||
@info-color: @white;
|
||||
@info-padding: 0 3px;
|
||||
@info-font-size: 12px;
|
||||
@info-font-weight: 500;
|
||||
@info-border-width: 1px;
|
||||
@info-background-color: @red;
|
||||
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
|
||||
// Notify
|
||||
@notify-padding: 6px 15px;
|
||||
@notify-font-size: 14px;
|
||||
@notify-line-height: 20px;
|
||||
|
||||
// Switch
|
||||
@switch-width: 2em;
|
||||
@switch-height: 1em;
|
||||
@switch-node-size: 1em;
|
||||
@switch-node-z-index: 1;
|
||||
@switch-node-background-color: @white;
|
||||
@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
||||
@switch-background-color: @white;
|
||||
@switch-on-background-color: @blue;
|
||||
@switch-transition-duration: .3s;
|
||||
@switch-disabled-opacity: .4;
|
||||
@switch-border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
// SwitchCell
|
||||
@switch-cell-padding-top: 9px;
|
||||
@switch-cell-padding-bottom: 9px;
|
||||
|
||||
// Toast
|
||||
@toast-max-width: 70%;
|
||||
@toast-font-size: 14px;
|
||||
@ -49,7 +96,7 @@
|
||||
@toast-line-height: 20px;
|
||||
@toast-border-radius: 4px;
|
||||
@toast-background-color: rgba(0, 0, 0, .7);
|
||||
@toast-icon-size: 50px;
|
||||
@toast-icon-size: 48px;
|
||||
@toast-text-min-width: 96px;
|
||||
@toast-text-padding: 8px 12px;
|
||||
@toast-default-padding: 15px;
|
||||
|
||||
@ -11,8 +11,13 @@ function isNumber(value) {
|
||||
return /^\d+$/.test(value);
|
||||
}
|
||||
|
||||
function range(num: number, min: number, max: number) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
}
|
||||
|
||||
export {
|
||||
isObj,
|
||||
isDef,
|
||||
isNumber
|
||||
isNumber,
|
||||
range
|
||||
};
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
function isSrc(url) {
|
||||
return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
|
||||
}
|
||||
|
||||
module.exports.isSrc = isSrc;
|
||||
@ -13,6 +13,8 @@
|
||||
|
||||
#### 选择完整时间
|
||||
|
||||
`value` 为时间戳
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
type="datetime"
|
||||
@ -43,6 +45,8 @@ Page({
|
||||
|
||||
#### 选择日期（年月日）
|
||||
|
||||
`value` 为时间戳
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
type="date"
|
||||
@ -69,6 +73,8 @@ Page({
|
||||
|
||||
#### 选择日期（年月）
|
||||
|
||||
`value` 为时间戳
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
type="year-month"
|
||||
@ -95,6 +101,8 @@ Page({
|
||||
|
||||
#### 选择时间
|
||||
|
||||
`value` 为字符串
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@ -125,7 +133,8 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|------|
|
||||
| type | 类型，可选值为 `date` <br> `time` `year-month` | `String` | `datetime` |
|
||||
| value | 当前选中值 | `String | Number` | - |
|
||||
| type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | `String` | `datetime` |
|
||||
| min-date | 可选的最小时间，精确到分钟 | `Number` | 十年前 |
|
||||
| max-date | 可选的最大时间，精确到分钟 | `Number` | 十年后 |
|
||||
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |
|
||||
|
||||
@ -39,6 +39,7 @@ Dialog.alert({
|
||||
```
|
||||
|
||||
#### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
|
||||
```javascript
|
||||
@ -127,6 +128,7 @@ Page({
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 标题 | `String` | - |
|
||||
| message | 内容 | `String` | - |
|
||||
| messageAlign | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
|
||||
| zIndex | z-index 层级 | `Number` | `100` |
|
||||
| selector | 自定义选择器 | `String` | `van-dialog` |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
|
||||
@ -149,6 +151,7 @@ Page({
|
||||
| show | 是否显示弹窗 | `Boolean` | - |
|
||||
| title | 标题 | `String` | - |
|
||||
| message | 内容 | `String` | - |
|
||||
| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
|
||||
| z-index | z-index 层级 | `Number` | `100` |
|
||||
| show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` |
|
||||
| show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` |
|
||||
|
||||
@ -11,6 +11,7 @@ type DialogOptions = {
|
||||
selector?: string;
|
||||
transition?: string;
|
||||
asyncClose?: boolean;
|
||||
messageAlign?: string;
|
||||
confirmButtonText?: string;
|
||||
cancelButtonText?: string;
|
||||
showConfirmButton?: boolean;
|
||||
@ -68,6 +69,7 @@ Dialog.defaultOptions = {
|
||||
zIndex: 100,
|
||||
overlay: true,
|
||||
asyncClose: false,
|
||||
messageAlign: '',
|
||||
transition: 'scale',
|
||||
selector: '#van-dialog',
|
||||
confirmButtonText: '确认',
|
||||
|
||||
@ -23,12 +23,21 @@
|
||||
line-height: 1.5;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&--has-title {
|
||||
padding-top: 12px;
|
||||
color: @gray-darker;
|
||||
}
|
||||
|
||||
&--left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
||||
@ -10,6 +10,7 @@ VantComponent({
|
||||
message: String,
|
||||
useSlot: Boolean,
|
||||
asyncClose: Boolean,
|
||||
messageAlign: String,
|
||||
showCancelButton: Boolean,
|
||||
closeOnClickOverlay: Boolean,
|
||||
confirmButtonOpenType: String,
|
||||
@ -95,7 +96,9 @@ VantComponent({
|
||||
this.close();
|
||||
}
|
||||
this.$emit('close', action);
|
||||
this.$emit(action);
|
||||
|
||||
//把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
|
||||
this.$emit(action, { dialog: this });
|
||||
|
||||
const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
|
||||
if (callback) {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<slot wx:if="{{ useSlot }}" />
|
||||
<view
|
||||
wx:elif="{{ message }}"
|
||||
class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }}"
|
||||
class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
|
||||
>
|
||||
<text>{{ message }}</text>
|
||||
</view>
|
||||
|
||||
@ -164,6 +164,7 @@ Page({
|
||||
| adjust-position | 键盘弹起时，是否自动上推页面 | `Boolean` | `true` |
|
||||
| use-icon-slot | 是否使用 icon slot | `Boolean` | `false` |
|
||||
| use-button-slot | 是否使用 button slot | `Boolean` | `false` |
|
||||
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | `Boolean` | `true` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -37,6 +37,10 @@
|
||||
&--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
&__clear-root {
|
||||
@ -78,8 +82,4 @@
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,6 +29,10 @@ VantComponent({
|
||||
customStyle: String,
|
||||
useIconSlot: Boolean,
|
||||
useButtonSlot: Boolean,
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
placeholderStyle: String,
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
@ -60,18 +64,6 @@ VantComponent({
|
||||
showClear: false
|
||||
},
|
||||
|
||||
computed: {
|
||||
inputClass(): string {
|
||||
const { data } = this;
|
||||
return this.classNames('input-class', 'van-field__input', {
|
||||
'van-field--error': data.error,
|
||||
'van-field__textarea': data.type === 'textarea',
|
||||
'van-field__input--disabled': data.disabled,
|
||||
[`van-field__input--${data.inputAlign}`]: data.inputAlign
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.focused = false;
|
||||
},
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<van-cell
|
||||
icon="{{ leftIcon }}"
|
||||
title="{{ label }}"
|
||||
@ -14,7 +16,7 @@
|
||||
<view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
|
||||
<textarea
|
||||
wx:if="{{ type === 'textarea' }}"
|
||||
class="{{ inputClass }}"
|
||||
class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
|
||||
fixed="{{ fixed }}"
|
||||
focus="{{ focus }}"
|
||||
value="{{ value }}"
|
||||
@ -23,9 +25,10 @@
|
||||
auto-height="{{ autosize }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
placeholder-style="{{ placeholderStyle }}"
|
||||
placeholder-class="{{ error ? 'van-field--error' : '' }}"
|
||||
placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
|
||||
cursor-spacing="{{ cursorSpacing }}"
|
||||
adjust-position="{{ adjustPosition }}"
|
||||
show-confirm-bar="{{ showConfirmBar }}"
|
||||
bindinput="onInput"
|
||||
bind:blur="onBlur"
|
||||
bind:focus="onFocus"
|
||||
@ -33,7 +36,7 @@
|
||||
/>
|
||||
<input
|
||||
wx:else
|
||||
class="{{ inputClass }}"
|
||||
class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
|
||||
type="{{ type }}"
|
||||
focus="{{ focus }}"
|
||||
value="{{ value }}"
|
||||
@ -41,7 +44,7 @@
|
||||
maxlength="{{ maxlength }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
placeholder-style="{{ placeholderStyle }}"
|
||||
placeholder-class="{{ error ? 'van-field--error' : '' }}"
|
||||
placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
|
||||
confirm-type="{{ confirmType }}"
|
||||
confirm-hold="{{ confirmHold }}"
|
||||
cursor-spacing="{{ cursorSpacing }}"
|
||||
|
||||
@ -1,19 +1,6 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { iphonex } from '../mixins/iphonex';
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
rootClass() {
|
||||
const { safeAreaInsetBottom, isIPhoneX } = this.data;
|
||||
return this.classNames('van-goods-action', 'custom-class', {
|
||||
[`van-goods-action--safe`]: isIPhoneX && safeAreaInsetBottom
|
||||
});
|
||||
}
|
||||
}
|
||||
mixins: [iphonex]
|
||||
});
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<view class="{{ rootClass }}">
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="custom-class {{ utils.bem('goods-action', { safe: isIPhoneX && safeAreaInsetBottom }) }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-info": "../info/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,26 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -8px;
|
||||
color: @white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
min-width: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid @white;
|
||||
border-radius: 16px;
|
||||
background-color: @red;
|
||||
transform: translateX(50%);
|
||||
transform-origin: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ classPrefix }} {{ utils.isSrc(name) ? 'van-icon--image' : classPrefix + '-' + name }}"
|
||||
style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view
|
||||
<van-info
|
||||
wx:if="{{ info !== null }}"
|
||||
class="van-icon__info"
|
||||
>
|
||||
{{ info }}
|
||||
</view>
|
||||
info="{{ info }}"
|
||||
/>
|
||||
<image
|
||||
wx:if="{{ utils.isSrc(name) }}"
|
||||
src="{{ name }}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<wxs src="../common/utils.wxs" module="utils" />
|
||||
|
||||
3
packages/info/index.json
Normal file
3
packages/info/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
21
packages/info/index.less
Normal file
21
packages/info/index.less
Normal file
@ -0,0 +1,21 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -@info-size / 2;
|
||||
color: @info-color;
|
||||
font-size: @info-font-size;
|
||||
font-weight: @info-font-weight;
|
||||
font-family: @info-font-family;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: @info-padding;
|
||||
min-width: @info-size;
|
||||
line-height: @info-size - @info-border-width * 2;
|
||||
border: @info-border-width solid @white;
|
||||
border-radius: @info-size;
|
||||
background-color: @info-background-color;
|
||||
transform: translateX(50%);
|
||||
transform-origin: 100%;
|
||||
}
|
||||
8
packages/info/index.ts
Normal file
8
packages/info/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
info: null,
|
||||
customStyle: String
|
||||
}
|
||||
});
|
||||
7
packages/info/index.wxml
Normal file
7
packages/info/index.wxml
Normal file
@ -0,0 +1,7 @@
|
||||
<view
|
||||
wx:if="{{ info !== null }}"
|
||||
class="custom-class van-info"
|
||||
style="{{ customStyle }}"
|
||||
>
|
||||
{{ info }}
|
||||
</view>
|
||||
@ -1,24 +1,5 @@
|
||||
import { classNames } from '../common/class-names';
|
||||
|
||||
export const basic = Behavior({
|
||||
created() {
|
||||
wx.getSystemInfo({
|
||||
success: ({ model, screenHeight }) => {
|
||||
const isIphoneX = /iphone x/i.test(model);
|
||||
const isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
|
||||
|
||||
if (isIphoneX || isIphoneNew) {
|
||||
this.set({
|
||||
isIPhoneX: true
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
classNames,
|
||||
|
||||
$emit() {
|
||||
this.triggerEvent.apply(this, arguments);
|
||||
},
|
||||
|
||||
34
packages/mixins/iphonex.ts
Normal file
34
packages/mixins/iphonex.ts
Normal file
@ -0,0 +1,34 @@
|
||||
let isIPhoneX = null;
|
||||
|
||||
function getIsIPhoneX() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (isIPhoneX !== null) {
|
||||
resolve(isIPhoneX);
|
||||
} else {
|
||||
wx.getSystemInfo({
|
||||
success: ({ model, screenHeight }) => {
|
||||
const iphoneX = /iphone x/i.test(model);
|
||||
const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
|
||||
isIPhoneX = iphoneX || iphoneNew;
|
||||
resolve(isIPhoneX);
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const iphonex = Behavior({
|
||||
properties: {
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
getIsIPhoneX().then(isIPhoneX => {
|
||||
this.set({ isIPhoneX });
|
||||
});
|
||||
}
|
||||
});
|
||||
3
packages/picker-column/index.json
Normal file
3
packages/picker-column/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
21
packages/picker-column/index.less
Normal file
21
packages/picker-column/index.less
Normal file
@ -0,0 +1,21 @@
|
||||
@import '../common/style/var';
|
||||
|
||||
.van-picker-column {
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__item {
|
||||
padding: 0 5px;
|
||||
color: @gray-dark;
|
||||
|
||||
&--selected {
|
||||
font-weight: 500;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
160
packages/picker-column/index.ts
Normal file
160
packages/picker-column/index.ts
Normal file
@ -0,0 +1,160 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { isObj, range } from '../common/utils';
|
||||
|
||||
const DEFAULT_DURATION = 200;
|
||||
|
||||
VantComponent({
|
||||
classes: ['active-class'],
|
||||
|
||||
props: {
|
||||
valueKey: String,
|
||||
className: String,
|
||||
itemHeight: Number,
|
||||
visibleItemCount: Number,
|
||||
initialOptions: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Number,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
startY: 0,
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
startOffset: 0,
|
||||
options: [],
|
||||
currentIndex: 0
|
||||
},
|
||||
|
||||
created() {
|
||||
const { defaultIndex, initialOptions } = this.data;
|
||||
this.set({
|
||||
currentIndex: defaultIndex,
|
||||
options: initialOptions
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
count() {
|
||||
return this.data.options.length;
|
||||
},
|
||||
|
||||
baseOffset() {
|
||||
const { data } = this;
|
||||
return (data.itemHeight * (data.visibleItemCount - 1)) / 2;
|
||||
},
|
||||
|
||||
wrapperStyle() {
|
||||
const { data } = this;
|
||||
return [
|
||||
`transition: ${data.duration}ms`,
|
||||
`transform: translate3d(0, ${data.offset + data.baseOffset}px, 0)`,
|
||||
`line-height: ${data.itemHeight}px`
|
||||
].join('; ');
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
defaultIndex(value: number) {
|
||||
this.setIndex(value);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTouchStart(event: Weapp.TouchEvent) {
|
||||
this.set({
|
||||
startY: event.touches[0].clientY,
|
||||
startOffset: this.data.offset,
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
onTouchMove(event: Weapp.TouchEvent) {
|
||||
const { data } = this;
|
||||
const deltaY = event.touches[0].clientY - data.startY;
|
||||
this.set({
|
||||
offset: range(
|
||||
data.startOffset + deltaY,
|
||||
-(data.count * data.itemHeight),
|
||||
data.itemHeight
|
||||
)
|
||||
});
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
const { data } = this;
|
||||
if (data.offset !== data.startOffset) {
|
||||
this.set({
|
||||
duration: DEFAULT_DURATION
|
||||
});
|
||||
const index = range(
|
||||
Math.round(-data.offset / data.itemHeight),
|
||||
0,
|
||||
data.count - 1
|
||||
);
|
||||
this.setIndex(index, true);
|
||||
}
|
||||
},
|
||||
|
||||
onClickItem(event: Weapp.Event) {
|
||||
const { index } = event.currentTarget.dataset;
|
||||
this.setIndex(index, true);
|
||||
},
|
||||
|
||||
adjustIndex(index: number) {
|
||||
const { data } = this;
|
||||
index = range(index, 0, data.count);
|
||||
for (let i = index; i < data.count; i++) {
|
||||
if (!this.isDisabled(data.options[i])) return i;
|
||||
}
|
||||
for (let i = index - 1; i >= 0; i--) {
|
||||
if (!this.isDisabled(data.options[i])) return i;
|
||||
}
|
||||
},
|
||||
|
||||
isDisabled(option: any) {
|
||||
return isObj(option) && option.disabled;
|
||||
},
|
||||
|
||||
getOptionText(option: any) {
|
||||
const { data } = this;
|
||||
return isObj(option) && data.valueKey in option
|
||||
? option[data.valueKey]
|
||||
: option;
|
||||
},
|
||||
|
||||
setIndex(index: number, userAction: boolean) {
|
||||
const { data } = this;
|
||||
index = this.adjustIndex(index) || 0;
|
||||
|
||||
this.set({
|
||||
offset: -index * data.itemHeight
|
||||
});
|
||||
|
||||
if (index !== data.currentIndex) {
|
||||
this.set({
|
||||
currentIndex: index
|
||||
});
|
||||
userAction && this.$emit('change', index);
|
||||
}
|
||||
},
|
||||
|
||||
setValue(value: string) {
|
||||
const { options } = this.data;
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
if (this.getOptionText(options[i]) === value) {
|
||||
return this.setIndex(i);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getValue() {
|
||||
const { data } = this;
|
||||
return data.options[data.currentIndex];
|
||||
}
|
||||
}
|
||||
});
|
||||
31
packages/picker-column/index.wxml
Normal file
31
packages/picker-column/index.wxml
Normal file
@ -0,0 +1,31 @@
|
||||
<view
|
||||
class="van-picker-column custom-class"
|
||||
style="height: {{ itemHeight * visibleItemCount }}px"
|
||||
bind:touchstart="onTouchStart"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchend="onTouchEnd"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
>
|
||||
<view style="{{ wrapperStyle }}">
|
||||
<view
|
||||
wx:for="{{ options }}"
|
||||
wx:for-item="option"
|
||||
wx:key="index"
|
||||
data-index="{{ index }}"
|
||||
style="height: {{ itemHeight }}px"
|
||||
class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
|
||||
bindtap="onClickItem"
|
||||
>{{ getOptionText(option, valueKey) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<wxs module="getOptionText">
|
||||
function isObj(x) {
|
||||
var type = typeof x;
|
||||
return x !== null && (type === 'object' || type === 'function');
|
||||
}
|
||||
|
||||
module.exports = function (option, valueKey) {
|
||||
return isObj(option) && option[valueKey] ? option[valueKey] : option;
|
||||
}
|
||||
</wxs>
|
||||
185
packages/picker/README.md
Normal file
185
packages/picker/README.md
Normal file
@ -0,0 +1,185 @@
|
||||
## Picker 选择器
|
||||
选择器组件通常与 [弹出层](#/popup) 组件配合使用
|
||||
|
||||
### 使用指南
|
||||
在 app.json 或 index.json 中引入组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-picker": "path/to/vant-weapp/dist/picker/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-picker columns="{{ columns }}" bind:change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
import Toast from 'path/to/vant-weapp/dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
const { picker, value, index } = event.detail;
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 禁用选项
|
||||
选项可以为对象结构，通过设置 disabled 来禁用该选项
|
||||
|
||||
```html
|
||||
<van-picker columns="{{ columns }}" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
columns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' }
|
||||
]
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 展示顶部栏
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
show-toolbar
|
||||
title="标题"
|
||||
columns="{{ columns }}"
|
||||
bind:cancel="onCancel"
|
||||
bind:confirm="onConfirm"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
import Toast from 'path/to/vant-weapp/dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
},
|
||||
|
||||
onConfirm(event) {
|
||||
const { picker, value, index } = event.detail;
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
Toast('取消');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 多列联动
|
||||
|
||||
```html
|
||||
<van-picker columns="{{ columns }}" bind:change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州']
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
columns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: citys['浙江'],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
const { picker, value, index } = event.detail;
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
|
||||
|
||||
```html
|
||||
<van-picker columns="{{ columns }}" loading />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
|
||||
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
|
||||
| title | 顶部栏标题 | `String` | `''` | - |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` | - |
|
||||
| value-key | 选项对象中，文字对应的 key | `String` | `text` | - |
|
||||
| item-height | 选项高度 | `Number` | `44` | - |
|
||||
| confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
|
||||
| cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
|
||||
|
||||
### Event
|
||||
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
|
||||
### Columns 数据结构
|
||||
|
||||
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
|
||||
|
||||
| key | 说明 |
|
||||
|------|------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中项的索引，默认为 0 |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
| active-class | 选中项样式类 |
|
||||
| toolbar-class | 顶部栏样式类 |
|
||||
| column-class | 列样式类 |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 selectComponent 可以获取到 picker 实例并调用实例方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|------|------|------|------|
|
||||
| getValues | - | values | 获取所有列选中的值 |
|
||||
| setValues | values | - | 设置所有列选中的值 |
|
||||
| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
|
||||
| setIndexes | indexes | - | 设置所有列选中值对应的索引 |
|
||||
| getColumnValue | columnIndex | value | 获取对应列选中的值 |
|
||||
| setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
|
||||
| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
|
||||
| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
|
||||
| getColumnValues | columnIndex | values | 获取对应列中所有选项 |
|
||||
| setColumnValues | columnIndex, values | - | 设置对应列中所有选项 |
|
||||
7
packages/picker/index.json
Normal file
7
packages/picker/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"picker-column": "../picker-column/index",
|
||||
"loading": "../loading/index"
|
||||
}
|
||||
}
|
||||
67
packages/picker/index.less
Normal file
67
packages/picker/index.less
Normal file
@ -0,0 +1,67 @@
|
||||
@import '../common/style/var';
|
||||
|
||||
.van-picker {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
|
||||
background-color: @white;
|
||||
user-select: none;
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__cancel,
|
||||
&__confirm {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
color: @blue;
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: 50%;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__columns {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__loading .van-loading,
|
||||
&__frame {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
154
packages/picker/index.ts
Normal file
154
packages/picker/index.ts
Normal file
@ -0,0 +1,154 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
classes: ['active-class', 'toolbar-class', 'column-class'],
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
loading: Boolean,
|
||||
showToolbar: Boolean,
|
||||
confirmButtonText: String,
|
||||
cancelButtonText: String,
|
||||
visibleItemCount: {
|
||||
type: Number,
|
||||
value: 5
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
value: 'text'
|
||||
},
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
value: 44
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer(columns = []) {
|
||||
this.set({
|
||||
simple: columns.length && !columns[0].values
|
||||
}, () => {
|
||||
const children = this.children = this.selectAllComponents('.van-picker__column');
|
||||
|
||||
if (Array.isArray(children) && children.length) {
|
||||
this.setColumns();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
noop() {},
|
||||
|
||||
setColumns() {
|
||||
const { data } = this;
|
||||
const columns = data.simple ? [{ values: data.columns }] : data.columns;
|
||||
columns.forEach((columns, index: number) => {
|
||||
this.setColumnValues(index, columns.values);
|
||||
});
|
||||
},
|
||||
|
||||
emit(event: Weapp.Event) {
|
||||
const { type } = event.currentTarget.dataset;
|
||||
if (this.data.simple) {
|
||||
this.$emit(type, {
|
||||
value: this.getColumnValue(0),
|
||||
index: this.getColumnIndex(0)
|
||||
});
|
||||
} else {
|
||||
this.$emit(type, {
|
||||
value: this.getValues(),
|
||||
index: this.getIndexes()
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onChange(event: Weapp.Event) {
|
||||
if (this.data.simple) {
|
||||
this.$emit('change', {
|
||||
picker: this,
|
||||
value: this.getColumnValue(0),
|
||||
index: this.getColumnIndex(0)
|
||||
});
|
||||
} else {
|
||||
this.$emit('change', {
|
||||
picker: this,
|
||||
value: this.getValues(),
|
||||
index: event.currentTarget.dataset.index
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// get column instance by index
|
||||
getColumn(index: number) {
|
||||
return this.children[index];
|
||||
},
|
||||
|
||||
// get column value by index
|
||||
getColumnValue(index: number) {
|
||||
const column = this.getColumn(index);
|
||||
return column && column.getValue();
|
||||
},
|
||||
|
||||
// set column value by index
|
||||
setColumnValue(index: number, value: any) {
|
||||
const column = this.getColumn(index);
|
||||
column && column.setValue(value);
|
||||
},
|
||||
|
||||
// get column option index by column index
|
||||
getColumnIndex(columnIndex: number) {
|
||||
return (this.getColumn(columnIndex) || {}).data.currentIndex;
|
||||
},
|
||||
|
||||
// set column option index by column index
|
||||
setColumnIndex(columnIndex: number, optionIndex: number) {
|
||||
const column = this.getColumn(columnIndex);
|
||||
column && column.setIndex(optionIndex);
|
||||
},
|
||||
|
||||
// get options of column by index
|
||||
getColumnValues(index: number) {
|
||||
return (this.children[index] || {}).data.options;
|
||||
},
|
||||
|
||||
// set options of column by index
|
||||
setColumnValues(index: number, options: any[]) {
|
||||
const column = this.children[index];
|
||||
|
||||
if (
|
||||
column &&
|
||||
JSON.stringify(column.data.options) !== JSON.stringify(options)
|
||||
) {
|
||||
column.set({ options }, () => {
|
||||
column.setIndex(0);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// get values of all columns
|
||||
getValues() {
|
||||
return this.children.map((child: Weapp.Component) => child.getValue());
|
||||
},
|
||||
|
||||
// set values of all columns
|
||||
setValues(values: []) {
|
||||
values.forEach((value, index) => {
|
||||
this.setColumnValue(index, value);
|
||||
});
|
||||
},
|
||||
|
||||
// get indexes of all columns
|
||||
getIndexes() {
|
||||
return this.children.map((child: Weapp.Component) => child.data.currentIndex);
|
||||
},
|
||||
|
||||
// set indexes of all columns
|
||||
setIndexes(indexes: number[]) {
|
||||
indexes.forEach((optionIndex, columnIndex) => {
|
||||
this.setColumnIndex(columnIndex, optionIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
41
packages/picker/index.wxml
Normal file
41
packages/picker/index.wxml
Normal file
@ -0,0 +1,41 @@
|
||||
<view class="van-picker custom-class">
|
||||
<view
|
||||
wx:if="{{ showToolbar }}"
|
||||
class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
|
||||
>
|
||||
<view class="van-picker__cancel" data-type="cancel" bindtap="emit">
|
||||
{{ cancelButtonText || '取消' }}
|
||||
</view>
|
||||
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view>
|
||||
<view class="van-picker__confirm" data-type="confirm" bindtap="emit">
|
||||
{{ confirmButtonText || '确认' }}
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{ loading }}" class="van-picker__loading">
|
||||
<loading color="#1989fa"/>
|
||||
</view>
|
||||
<view
|
||||
class="van-picker__columns"
|
||||
style="height: {{ itemHeight * visibleItemCount }}px"
|
||||
catch:touchmove="noop"
|
||||
>
|
||||
<picker-column
|
||||
class="van-picker__column"
|
||||
wx:for="{{ simple ? [columns] : columns }}"
|
||||
wx:key="index"
|
||||
data-index="{{ index }}"
|
||||
custom-class="column-class"
|
||||
value-key="{{ valueKey }}"
|
||||
initial-options="{{ simple ? item : item.values }}"
|
||||
default-index="{{ item.defaultIndex }}"
|
||||
item-height="{{ itemHeight }}"
|
||||
visible-item-count="{{ visibleItemCount }}"
|
||||
active-class="active-class"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
<view
|
||||
class="van-picker__frame van-hairline--top-bottom"
|
||||
style="height: {{ itemHeight }}px"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
@ -1,8 +1,9 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { transition } from '../mixins/transition';
|
||||
import { iphonex } from '../mixins/iphonex';
|
||||
|
||||
VantComponent({
|
||||
mixins: [transition(false)],
|
||||
mixins: [transition(false), iphonex],
|
||||
|
||||
props: {
|
||||
transition: String,
|
||||
@ -23,20 +24,6 @@ VantComponent({
|
||||
position: {
|
||||
type: String,
|
||||
value: 'center'
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
popupClass() {
|
||||
const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
|
||||
return this.classNames('custom-class', 'van-popup', {
|
||||
[`van-popup--${position}`]: position,
|
||||
[`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<van-overlay
|
||||
wx:if="{{ inited && overlay }}"
|
||||
mask
|
||||
@ -8,7 +10,7 @@
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ inited }}"
|
||||
class="{{ popupClass }}"
|
||||
class="custom-class {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom && position === 'bottom' }]) }}"
|
||||
style="z-index: {{ zIndex }}; -webkit-animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; {{ display ? '' : 'display: none;' }}{{ customStyle }}"
|
||||
bind:animationend="onAnimationEnd"
|
||||
>
|
||||
|
||||
@ -19,17 +19,6 @@ VantComponent({
|
||||
checkedColor: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconClass(): string {
|
||||
const { disabled, name, value } = this.data;
|
||||
return this.classNames('van-radio__icon', {
|
||||
'van-radio__icon--disabled': disabled,
|
||||
'van-radio__icon--checked': !disabled && name === value,
|
||||
'van-radio__icon--check': !disabled && name !== value
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
emitChange(value) {
|
||||
const instance = this.getRelationNodes('../radio-group/index')[0] || this;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-radio custom-class">
|
||||
<view class="van-radio__input">
|
||||
<radio-group bindchange="onChange">
|
||||
@ -9,7 +11,7 @@
|
||||
/>
|
||||
</radio-group>
|
||||
<van-icon
|
||||
class="{{ iconClass }}"
|
||||
class="{{ utils.bem('radio__icon', { disabled, checked: !disabled && name === value, check: !disabled && name !== value }) }}"
|
||||
custom-class="icon-class"
|
||||
color="{{ value === name ? checkedColor : '' }}"
|
||||
name="{{ value === name ? 'checked' : 'check' }}"
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
&__minus,
|
||||
&__plus,
|
||||
&__input {
|
||||
&__input-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-color: @white;
|
||||
@ -13,12 +13,12 @@
|
||||
|
||||
&__minus,
|
||||
&__plus {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @border-color;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
border: 1px solid @border-color;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
width: 9px;
|
||||
@ -32,14 +32,14 @@
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
background-color: @gray-darker;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -72,23 +72,32 @@
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 33px;
|
||||
height: 26px;
|
||||
&__input-wrapper {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
padding: 1px;
|
||||
min-height: 0; // reset wechat default min height
|
||||
font-size: 14px;
|
||||
color: @gray-darker;
|
||||
text-align: center;
|
||||
border: 1px solid @border-color;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
color: @gray-darker;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--disabled {
|
||||
color: @gray;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
min-height: 0; // reset wechat default min height
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,6 +50,10 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
focus: false
|
||||
},
|
||||
|
||||
created() {
|
||||
this.set({
|
||||
value: this.range(this.data.value)
|
||||
@ -57,6 +61,12 @@ VantComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.setData({
|
||||
focus: true
|
||||
});
|
||||
},
|
||||
|
||||
// limit value range
|
||||
range(value) {
|
||||
return Math.max(Math.min(this.data.max, value), this.data.min);
|
||||
|
||||
@ -3,14 +3,17 @@
|
||||
class="minus-class van-stepper__minus {{ minusDisabled ? 'van-stepper__minus--disabled' : '' }}"
|
||||
bind:tap="onMinus"
|
||||
/>
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="input-class van-stepper__input {{ disabled || disableInput ? 'van-stepper__input--disabled' : '' }}"
|
||||
value="{{ value }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
bindinput="onInput"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<view class="input-class van-stepper__input-wrapper {{ disabled || disableInput ? 'van-stepper__input-wrapper--disabled' : '' }}" bindtap="onFocus">
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="van-stepper__input"
|
||||
value="{{ value }}"
|
||||
focus="{{ focus }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
bindinput="onInput"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="plus-class van-stepper__plus {{ plusDisabled ? 'van-stepper__plus--disabled' : '' }}"
|
||||
bind:tap="onPlus"
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { iphonex } from '../mixins/iphonex';
|
||||
|
||||
VantComponent({
|
||||
mixins: [iphonex],
|
||||
|
||||
classes: [
|
||||
'bar-class',
|
||||
'price-class',
|
||||
@ -22,10 +25,6 @@ VantComponent({
|
||||
buttonType: {
|
||||
type: String,
|
||||
value: 'danger'
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
|
||||
@ -41,13 +40,6 @@ VantComponent({
|
||||
tipStr() {
|
||||
const { tip } = this.data;
|
||||
return typeof tip === 'string' ? tip : '';
|
||||
},
|
||||
|
||||
barClass() {
|
||||
const { isIPhoneX, safeAreaInsetBottom } = this.data;
|
||||
return this.classNames('van-submit-bar__bar', 'bar-class', {
|
||||
'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-submit-bar custom-class">
|
||||
<slot name="top" />
|
||||
|
||||
@ -5,7 +7,7 @@
|
||||
{{ tipStr }}<slot name="tip" />
|
||||
</view>
|
||||
|
||||
<view class="{{ barClass }}">
|
||||
<view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
|
||||
<slot />
|
||||
<view class="van-submit-bar__text">
|
||||
<block wx:if="{{ hasPrice }}">
|
||||
|
||||
@ -66,7 +66,9 @@ Page({
|
||||
| title | 左侧标题 | `String` | `''` |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` |
|
||||
| size | 开关尺寸 | `String` | `26px` |
|
||||
| size | 开关尺寸 | `String` | `24px` |
|
||||
| active-color | 开关打开时的背景色 | `String` | `#1989fa` |
|
||||
| inactive-color | 开关关闭时的背景色 | `String` | `#fff` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-switch-cell {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: @switch-cell-padding-top;
|
||||
padding-bottom: @switch-cell-padding-bottom;
|
||||
|
||||
&__switch {
|
||||
vertical-align: middle;
|
||||
|
||||
@ -9,9 +9,11 @@ VantComponent({
|
||||
checked: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
size: {
|
||||
type: String,
|
||||
value: '26px'
|
||||
value: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
checked="{{ checked }}"
|
||||
loading="{{ loading }}"
|
||||
disabled="{{ disabled }}"
|
||||
active-color="{{ activeColor }}"
|
||||
inactive-color="{{ inactiveColor }}"
|
||||
custom-class="van-switch-cell__switch"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
|
||||
@ -42,14 +42,27 @@ Page({
|
||||
<van-switch checked="{{ checked }}" loading />
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
#### 自定义大小
|
||||
|
||||
```html
|
||||
<van-switch checked="{{ checked }}" size="24px" />
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
size="36px"
|
||||
checked="{{ checked }}"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 异步控制
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-switch {
|
||||
height: 1em;
|
||||
width: 1.8em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 1em;
|
||||
width: @switch-width;
|
||||
height: @switch-height;
|
||||
border: @switch-border;
|
||||
border-radius: @switch-node-size;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
background-color: @white;
|
||||
transition: background-color .3s;
|
||||
background-color: @switch-background-color;
|
||||
transition: background-color @switch-transition-duration;
|
||||
|
||||
&__node {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transition: .3s;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background-color: @white;
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
||||
width: @switch-node-size;
|
||||
height: @switch-node-size;
|
||||
z-index: @switch-node-z-index;
|
||||
transition: @switch-transition-duration;
|
||||
box-shadow: @switch-node-box-shadow;
|
||||
background-color: @switch-node-background-color;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
@ -31,14 +31,14 @@
|
||||
}
|
||||
|
||||
&--on {
|
||||
background-color: @blue;
|
||||
background-color: @switch-on-background-color;
|
||||
|
||||
.van-switch__node {
|
||||
transform: translateX(.8em);
|
||||
transform: translateX(@switch-width - @switch-node-size);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .4;
|
||||
opacity: @switch-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,20 +23,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes(): string {
|
||||
return this.classNames('van-switch', {
|
||||
'van-switch--on': this.data.checked,
|
||||
'van-switch--disabled': this.data.disabled
|
||||
});
|
||||
},
|
||||
|
||||
style() {
|
||||
const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
|
||||
return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.set({ value: this.data.checked });
|
||||
},
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
style="{{ style }}"
|
||||
class="custom-class {{ classes }}"
|
||||
class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
|
||||
style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view class="van-switch__node node-class">
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user