@tuya-miniapp/smart-ui 0.0.1-beta-2 → 0.0.1-beta-4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +23 -28
- package/dist/action-sheet/index.css +1 -1
- package/dist/action-sheet/index.wxss +1 -1
- package/dist/picker-column/index.css +1 -1
- package/dist/picker-column/index.js +5 -1
- package/dist/picker-column/index.wxml +4 -5
- package/dist/picker-column/index.wxs +2 -14
- package/dist/picker-column/index.wxss +1 -1
- package/lib/action-sheet/index.css +1 -1
- package/lib/action-sheet/index.wxss +1 -1
- package/lib/picker-column/index.css +1 -1
- package/lib/picker-column/index.js +5 -1
- package/lib/picker-column/index.wxml +4 -5
- package/lib/picker-column/index.wxs +2 -14
- package/lib/picker-column/index.wxss +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,37 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
<img alt="logo" src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo.png" width="120" style="margin-bottom: 10px;">
|
|
3
|
-
</p>
|
|
4
|
-
<h3 align="center">轻量、可靠的智能小程序 UI 组件库</h3>
|
|
1
|
+
# @tuya-miniapp/smart-ui
|
|
5
2
|
|
|
6
|
-
|
|
3
|
+
## Introduction
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
`@tuya-miniapp/smart-ui` is a **lightweight and reliable smart MiniApp component library** based on `vant-weapp`, providing a complete set of UI components that adhere to the design specifications for smart MiniApp on mobile devices.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
## Preview
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
Scan the smart mini program QR code below to experience the component library examples.
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
<img src="https://images.tuyaus.com/content-platform/hestia/1716260344a168dc61f68.png" width="200" height="200" style="margin-top: 10px;" >
|
|
15
12
|
|
|
16
|
-
|
|
13
|
+
## Before Using
|
|
17
14
|
|
|
18
|
-
|
|
15
|
+
Before using Smart UI, make sure you have studied the official [Smart Mini Program Quick Start](https://developer.tuya.com/en/miniapp/develop/miniapp/guide/start/smart) and [Mini Program Component Introduction](https://developer.tuya.com/en/miniapp/develop/miniapp/framework/component/intro).
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
## 安装
|
|
17
|
+
## Installation
|
|
23
18
|
|
|
24
19
|
```bash
|
|
25
|
-
#
|
|
20
|
+
# Install via yarn (recommended)
|
|
26
21
|
yarn add @tuya-miniapp/smart-ui
|
|
27
22
|
|
|
28
|
-
#
|
|
23
|
+
# Install via npm
|
|
29
24
|
npm i @tuya-miniapp/smart-ui
|
|
30
25
|
```
|
|
31
26
|
|
|
32
|
-
##
|
|
27
|
+
## Using Components
|
|
33
28
|
|
|
34
|
-
|
|
29
|
+
Taking the button component as an example, you only need to import the corresponding custom component in the JSON file.
|
|
35
30
|
|
|
36
31
|
```json
|
|
37
32
|
{
|
|
@@ -41,28 +36,28 @@ npm i @tuya-miniapp/smart-ui
|
|
|
41
36
|
}
|
|
42
37
|
```
|
|
43
38
|
|
|
44
|
-
|
|
39
|
+
Then you can directly use the component in the TYML file.
|
|
45
40
|
|
|
46
41
|
```html
|
|
47
|
-
<s-button type="primary"
|
|
42
|
+
<s-button type="primary">Button</s-button>
|
|
48
43
|
```
|
|
49
44
|
|
|
50
|
-
##
|
|
45
|
+
## Preview in Developer Tools
|
|
51
46
|
|
|
52
47
|
```bash
|
|
53
|
-
#
|
|
48
|
+
# Install project dependencies
|
|
54
49
|
yarn
|
|
55
50
|
|
|
56
|
-
#
|
|
51
|
+
# Compile components
|
|
57
52
|
yarn dev
|
|
58
53
|
```
|
|
59
54
|
|
|
60
|
-
|
|
55
|
+
Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `smart-ui/example` directory, and you can preview the examples.
|
|
61
56
|
|
|
62
|
-
##
|
|
57
|
+
## Base Library Version
|
|
63
58
|
|
|
64
|
-
|
|
59
|
+
`@tuya-miniapp/smart-ui` provides stable support starting from the smart MiniApp base library version `2.19.0`.
|
|
65
60
|
|
|
66
|
-
##
|
|
61
|
+
## Open Source License
|
|
67
62
|
|
|
68
|
-
|
|
63
|
+
This project is licensed under the [MIT](https://en.wikipedia.org/wiki/MIT_License) license. Feel free to enjoy and contribute to the open-source community.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)
|
|
1
|
+
@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
|
|
@@ -128,7 +128,11 @@ VantComponent({
|
|
|
128
128
|
const optionsV = options.slice(renderStart, renderEnd);
|
|
129
129
|
return this.set({ optionsV, renderStart, renderNum });
|
|
130
130
|
}
|
|
131
|
-
return this.set({
|
|
131
|
+
return this.set({
|
|
132
|
+
optionsV: options,
|
|
133
|
+
renderStart: 0,
|
|
134
|
+
renderNum: options.length,
|
|
135
|
+
});
|
|
132
136
|
},
|
|
133
137
|
adjustIndex(index) {
|
|
134
138
|
const { data } = this;
|
|
@@ -8,10 +8,8 @@
|
|
|
8
8
|
catch:touchmove="onTouchMove"
|
|
9
9
|
bind:touchend="onTouchEnd"
|
|
10
10
|
bind:touchcancel="onTouchEnd"
|
|
11
|
-
maxtext="{{ maxText }}"
|
|
12
|
-
change:maxtext="{{ computed.unitStyle }}"
|
|
13
11
|
>
|
|
14
|
-
<view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart }) }}"
|
|
12
|
+
<view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}"
|
|
15
13
|
bind:transitionend="onTransitionEnd"
|
|
16
14
|
id="options">
|
|
17
15
|
<view
|
|
@@ -24,9 +22,10 @@
|
|
|
24
22
|
bindtap="onClickItem"
|
|
25
23
|
>{{ computed.optionText(option, valueKey) }}</view>
|
|
26
24
|
</view>
|
|
27
|
-
<view wx:if="{{unit}}" >
|
|
25
|
+
<view wx:if="{{unit}}" class="van-picker-column__unit" style="height: {{ itemHeight }}px">
|
|
26
|
+
<view class="van-picker-column__unit_text van-picker-column__unit_hidden" >{{unit}}</view>
|
|
28
27
|
<text class="van-picker-column__max-text">{{ maxText }}</text>
|
|
29
|
-
<view class="van-picker-
|
|
28
|
+
<view class="van-picker-column__unit_text" >{{unit}}</view>
|
|
30
29
|
</view>
|
|
31
30
|
|
|
32
31
|
</view>
|
|
@@ -17,19 +17,6 @@ function rootStyle(data) {
|
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
function unitStyle(value, oldValue, ownerInstance) {
|
|
21
|
-
var maxTextDom = ownerInstance.selectComponent('.van-picker-column__max-text');
|
|
22
|
-
var optionsDom = ownerInstance.selectComponent('#options');
|
|
23
|
-
var unitDom = ownerInstance.selectComponent('.van-picker-column__unit');
|
|
24
|
-
if (unitDom && maxTextDom) {
|
|
25
|
-
var maxWidth = maxTextDom.getBoundingClientRect().width;
|
|
26
|
-
optionsDom.setStyle({ 'text-indent': '-8rpx' });
|
|
27
|
-
unitDom.setStyle({
|
|
28
|
-
transform: 'translate(' + maxWidth / 2 + 'px,-50%)',
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
20
|
function wrapperStyle(data) {
|
|
34
21
|
var offset =
|
|
35
22
|
data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2;
|
|
@@ -40,12 +27,14 @@ function wrapperStyle(data) {
|
|
|
40
27
|
offset = addUnit(offset);
|
|
41
28
|
if (data.animate) {
|
|
42
29
|
return style({
|
|
30
|
+
'text-indent': data.unit ? '-8rpx' : '0',
|
|
43
31
|
transition: 'transform ' + data.duration + 'ms',
|
|
44
32
|
'line-height': addUnit(data.itemHeight),
|
|
45
33
|
transform: 'translate3d(0, ' + offset + ', 0)',
|
|
46
34
|
});
|
|
47
35
|
}
|
|
48
36
|
return style({
|
|
37
|
+
'text-indent': data.unit ? '-8rpx' : '0',
|
|
49
38
|
'line-height': addUnit(data.itemHeight),
|
|
50
39
|
transform: 'translate3d(0, ' + offset + ', 0)',
|
|
51
40
|
});
|
|
@@ -55,5 +44,4 @@ module.exports = {
|
|
|
55
44
|
optionText: optionText,
|
|
56
45
|
rootStyle: rootStyle,
|
|
57
46
|
wrapperStyle: wrapperStyle,
|
|
58
|
-
unitStyle: unitStyle,
|
|
59
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)
|
|
1
|
+
@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)
|
|
1
|
+
@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
|
|
@@ -130,7 +130,11 @@ var DEFAULT_DURATION = 200;
|
|
|
130
130
|
var optionsV = options.slice(renderStart, renderEnd);
|
|
131
131
|
return this.set({ optionsV: optionsV, renderStart: renderStart, renderNum: renderNum });
|
|
132
132
|
}
|
|
133
|
-
return this.set({
|
|
133
|
+
return this.set({
|
|
134
|
+
optionsV: options,
|
|
135
|
+
renderStart: 0,
|
|
136
|
+
renderNum: options.length,
|
|
137
|
+
});
|
|
134
138
|
},
|
|
135
139
|
adjustIndex: function (index) {
|
|
136
140
|
var data = this.data;
|
|
@@ -8,10 +8,8 @@
|
|
|
8
8
|
catch:touchmove="onTouchMove"
|
|
9
9
|
bind:touchend="onTouchEnd"
|
|
10
10
|
bind:touchcancel="onTouchEnd"
|
|
11
|
-
maxtext="{{ maxText }}"
|
|
12
|
-
change:maxtext="{{ computed.unitStyle }}"
|
|
13
11
|
>
|
|
14
|
-
<view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart }) }}"
|
|
12
|
+
<view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}"
|
|
15
13
|
bind:transitionend="onTransitionEnd"
|
|
16
14
|
id="options">
|
|
17
15
|
<view
|
|
@@ -24,9 +22,10 @@
|
|
|
24
22
|
bindtap="onClickItem"
|
|
25
23
|
>{{ computed.optionText(option, valueKey) }}</view>
|
|
26
24
|
</view>
|
|
27
|
-
<view wx:if="{{unit}}" >
|
|
25
|
+
<view wx:if="{{unit}}" class="van-picker-column__unit" style="height: {{ itemHeight }}px">
|
|
26
|
+
<view class="van-picker-column__unit_text van-picker-column__unit_hidden" >{{unit}}</view>
|
|
28
27
|
<text class="van-picker-column__max-text">{{ maxText }}</text>
|
|
29
|
-
<view class="van-picker-
|
|
28
|
+
<view class="van-picker-column__unit_text" >{{unit}}</view>
|
|
30
29
|
</view>
|
|
31
30
|
|
|
32
31
|
</view>
|
|
@@ -17,19 +17,6 @@ function rootStyle(data) {
|
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
function unitStyle(value, oldValue, ownerInstance) {
|
|
21
|
-
var maxTextDom = ownerInstance.selectComponent('.van-picker-column__max-text');
|
|
22
|
-
var optionsDom = ownerInstance.selectComponent('#options');
|
|
23
|
-
var unitDom = ownerInstance.selectComponent('.van-picker-column__unit');
|
|
24
|
-
if (unitDom && maxTextDom) {
|
|
25
|
-
var maxWidth = maxTextDom.getBoundingClientRect().width;
|
|
26
|
-
optionsDom.setStyle({ 'text-indent': '-8rpx' });
|
|
27
|
-
unitDom.setStyle({
|
|
28
|
-
transform: 'translate(' + maxWidth / 2 + 'px,-50%)',
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
20
|
function wrapperStyle(data) {
|
|
34
21
|
var offset =
|
|
35
22
|
data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2;
|
|
@@ -40,12 +27,14 @@ function wrapperStyle(data) {
|
|
|
40
27
|
offset = addUnit(offset);
|
|
41
28
|
if (data.animate) {
|
|
42
29
|
return style({
|
|
30
|
+
'text-indent': data.unit ? '-8rpx' : '0',
|
|
43
31
|
transition: 'transform ' + data.duration + 'ms',
|
|
44
32
|
'line-height': addUnit(data.itemHeight),
|
|
45
33
|
transform: 'translate3d(0, ' + offset + ', 0)',
|
|
46
34
|
});
|
|
47
35
|
}
|
|
48
36
|
return style({
|
|
37
|
+
'text-indent': data.unit ? '-8rpx' : '0',
|
|
49
38
|
'line-height': addUnit(data.itemHeight),
|
|
50
39
|
transform: 'translate3d(0, ' + offset + ', 0)',
|
|
51
40
|
});
|
|
@@ -55,5 +44,4 @@ module.exports = {
|
|
|
55
44
|
optionText: optionText,
|
|
56
45
|
rootStyle: rootStyle,
|
|
57
46
|
wrapperStyle: wrapperStyle,
|
|
58
|
-
unitStyle: unitStyle,
|
|
59
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)
|
|
1
|
+
@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
|