uview-plus 3.1.32 → 3.1.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +7 -91
- package/components/u-back-top/u-back-top.vue +1 -1
- package/components/u-calendar/header.vue +4 -2
- package/components/u-form/u-form.vue +1 -1
- package/components/u-grid/u-grid.vue +1 -0
- package/components/u-list/u-list.vue +1 -1
- package/components/u-message-input/u-message-input.vue +318 -0
- package/components/u-picker/u-picker.vue +1 -1
- package/components/u-scroll-list/u-scroll-list.vue +1 -1
- package/components/u-sticky/u-sticky.vue +3 -3
- package/components/u-swipe-action-item/index.wxs +4 -0
- package/components/u-transition/transition.js +18 -13
- package/components/u-transition/u-transition.vue +1 -0
- package/components/u-upload/u-upload.vue +0 -1
- package/index.scss +2 -1
- package/libs/css/flex.scss +39 -0
- package/libs/function/platform.js +4 -4
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -1,95 +1,11 @@
|
|
|
1
|
-
## 3.1.
|
|
1
|
+
## 3.1.35(2023-08-02)
|
|
2
|
+
修复编译到支付宝小程序u-form报错
|
|
3
|
+
## 3.1.34(2023-07-27)
|
|
4
|
+
修复App打包uni.$u.mpMixin方式sdk暂时不支持导致报错
|
|
5
|
+
## 3.1.33(2023-07-13)
|
|
6
|
+
修复弹窗进入动画、模板页面样式等
|
|
7
|
+
## 3.1.31(2023-07-11)
|
|
2
8
|
修复dayjs引用
|
|
3
|
-
## 3.1.30(2023-04-24)
|
|
4
|
-
修复date-time-picker
|
|
5
|
-
## 3.1.29(2023-03-11)
|
|
6
|
-
修复u-tabs标签结束兼容性
|
|
7
|
-
## 3.1.28(2023-03-03)
|
|
8
|
-
修复u-tabs标签缺失
|
|
9
|
-
## 3.1.27(2023-02-28)
|
|
10
|
-
修复日历组建对dayjs等依赖
|
|
11
|
-
## 3.1.26(2023-02-04)
|
|
12
|
-
修复安卓Multiple conflicting contents for sourcemap
|
|
13
|
-
## 3.1.25(2023-02-04)
|
|
14
|
-
修复dayjs引入问题导致小程序编译报错
|
|
15
|
-
## 3.1.24(2023-01-17)
|
|
16
|
-
修复dayjs报错does not provide an export named 'default'
|
|
17
|
-
## 3.1.23(2023-01-15)
|
|
18
|
-
修复 build:h5 cell 和 notice-bar 点击失效的问题
|
|
19
|
-
修复小程序端报 alert 和 upload 重复定义的bug
|
|
20
|
-
感谢@dodu2014
|
|
21
|
-
## 3.1.22(2023-01-14)
|
|
22
|
-
增加transpileDependencies检测
|
|
23
|
-
## 3.1.21(2023-01-14)
|
|
24
|
-
修复路由配置合并问题
|
|
25
|
-
## 3.1.20(2022-12-16)
|
|
26
|
-
修复拼写
|
|
27
|
-
## 3.1.19(2022-11-16)
|
|
28
|
-
修复u-rate的v-model绑定值不生效#48
|
|
29
|
-
修复u-grid-item click事件会执行两次 #40
|
|
30
|
-
修复u--input组建Property "value" was accessed during render but is not defined on instance
|
|
31
|
-
修复textarea组建confirmType报错
|
|
32
|
-
## 3.1.18(2022-10-23)
|
|
33
|
-
新增页面模板
|
|
34
|
-
## 3.1.17(2022-10-23)
|
|
35
|
-
演示项目增加国家化支持及多个页面模板
|
|
36
|
-
## 3.1.16(2022-10-21)
|
|
37
|
-
修复u-switch、u-picker等
|
|
38
|
-
## 3.1.15(2022-10-13)
|
|
39
|
-
修复:数据更新后,上传组件的视图没有更新
|
|
40
|
-
复选框 超出不换行
|
|
41
|
-
单选框 超出不换行
|
|
42
|
-
## 3.1.14(2022-10-11)
|
|
43
|
-
swipe-action-item组件增加emits定义
|
|
44
|
-
## 3.1.13(2022-09-19)
|
|
45
|
-
修复富文本解析
|
|
46
|
-
## 3.1.12(2022-09-15)
|
|
47
|
-
check-box组件清空数组时无法更新视图的问题
|
|
48
|
-
## 3.1.11(2022-09-14)
|
|
49
|
-
修复u-checkbox-group等
|
|
50
|
-
## 3.1.10(2022-09-14)
|
|
51
|
-
修复u-checkbox-box双向绑定
|
|
52
|
-
## 3.1.9(2022-09-08)
|
|
53
|
-
紧急修复缺失endif
|
|
54
|
-
## 3.1.8(2022-09-07)
|
|
55
|
-
修复u-checkbox-group双向绑定
|
|
56
|
-
修复picker缺少emits定义
|
|
57
|
-
## 3.1.7(2022-08-28)
|
|
58
|
-
修复布局在微信小程序失效
|
|
59
|
-
## 3.1.6(2022-08-25)
|
|
60
|
-
修复微信小程序下tabbar样式问题
|
|
61
|
-
## 3.1.5(2022-08-24)
|
|
62
|
-
修复icon/text/tabs点击事件执行两次
|
|
63
|
-
## 3.1.4(2022-08-20)
|
|
64
|
-
修复button组件点击事件执行两次
|
|
65
|
-
## 3.1.3(2022-08-11)
|
|
66
|
-
修复小程序报错Generated an empty chunk,修复示例工程引入request参数配置无效。
|
|
67
|
-
## 3.1.2(2022-08-09)
|
|
68
|
-
修复示例项目对request的调用引入
|
|
69
|
-
## 3.1.1(2022-08-07)
|
|
70
|
-
折叠面板在小程序会报'setContentAnimate' of undefined
|
|
71
|
-
## 3.1.0(2022-08-07)
|
|
72
|
-
初步解决App端运行时提示props未定义且白屏问题
|
|
73
|
-
## 3.0.17(2022-08-03)
|
|
74
|
-
修复u-image组件报borderRadius警告
|
|
75
|
-
## 3.0.16(2022-07-30)
|
|
76
|
-
修复方法重复,属性重复等多个编译到APP时的warning
|
|
77
|
-
## 3.0.15(2022-07-22)
|
|
78
|
-
修复支付宝下不支持this.$slots导致cell的slot失效
|
|
79
|
-
## 3.0.14(2022-07-22)
|
|
80
|
-
修复u-grid-item与u-swipe-action-item在支付宝编译报错问题
|
|
81
|
-
## 3.0.13(2022-07-22)
|
|
82
|
-
修复u--input与u--textarea组件多个事件执行两次问题
|
|
83
|
-
## 3.0.12(2022-07-20)
|
|
84
|
-
修复u-action-sheet中v-for报错
|
|
85
|
-
u-collapse-item中slot修复
|
|
86
|
-
## 3.0.11(2022-07-19)
|
|
87
|
-
修复微信小程序编译报错及其它修复
|
|
88
|
-
## 3.0.10(2022-07-15)
|
|
89
|
-
修复文档一批slot示例写法
|
|
90
|
-
修复u-search缺失emits定义导致warning
|
|
91
|
-
## 3.0.9(2022-07-14)
|
|
92
|
-
修复u-search双向绑定
|
|
93
9
|
## 3.0.8(2022-07-12)
|
|
94
10
|
修复u-tag默认宽度撑满容器
|
|
95
11
|
## 3.0.7(2022-07-12)
|
|
@@ -20,10 +20,12 @@
|
|
|
20
20
|
</view>
|
|
21
21
|
</template>
|
|
22
22
|
|
|
23
|
-
<script>
|
|
23
|
+
<script>
|
|
24
|
+
import mpMixin from '../../libs/mixin/mpMixin.js';
|
|
25
|
+
import mixin from '../../libs/mixin/mixin.js';
|
|
24
26
|
export default {
|
|
25
27
|
name: 'u-calendar-header',
|
|
26
|
-
mixins: [
|
|
28
|
+
mixins: [mpMixin, mixin],
|
|
27
29
|
props: {
|
|
28
30
|
// 标题
|
|
29
31
|
title: {
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="u-char-box">
|
|
3
|
+
<view class="u-char-flex">
|
|
4
|
+
<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
|
|
5
|
+
<view v-for="(item, index) in loopCharArr" :key="index">
|
|
6
|
+
<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
|
|
7
|
+
charArrLength === index && mode == 'box' ? 'u-box-active' : '',
|
|
8
|
+
mode === 'box' ? 'u-box' : '']" :style="{
|
|
9
|
+
fontWeight: bold ? 'bold' : 'normal',
|
|
10
|
+
fontSize: fontSize + 'rpx',
|
|
11
|
+
width: width + 'rpx',
|
|
12
|
+
height: width + 'rpx',
|
|
13
|
+
color: inactiveColor,
|
|
14
|
+
borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
|
|
15
|
+
}">
|
|
16
|
+
<view class="u-placeholder-line" :style="{
|
|
17
|
+
display: charArrLength === index ? 'block' : 'none',
|
|
18
|
+
height: width * 0.5 +'rpx'
|
|
19
|
+
}"
|
|
20
|
+
v-if="mode !== 'middleLine'"
|
|
21
|
+
></view>
|
|
22
|
+
<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
|
|
23
|
+
class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
|
|
24
|
+
<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-bottom-line-active' : '']"
|
|
25
|
+
class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
|
|
26
|
+
<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
|
|
27
|
+
<block v-else>
|
|
28
|
+
<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
|
|
29
|
+
</block>
|
|
30
|
+
</view>
|
|
31
|
+
</view>
|
|
32
|
+
</view>
|
|
33
|
+
</view>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
/**
|
|
38
|
+
* messageInput 验证码输入框
|
|
39
|
+
* @description 该组件一般用于验证用户短信验证码的场景,也可以结合uView的键盘组件使用
|
|
40
|
+
* @tutorial https://www.uviewui.com/components/messageInput.html
|
|
41
|
+
* @property {String Number} maxlength 输入字符个数(默认4)
|
|
42
|
+
* @property {Boolean} dot-fill 是否用圆点填充(默认false)
|
|
43
|
+
* @property {String} mode 模式选择,见上方"基本使用"说明(默认box)
|
|
44
|
+
* @property {String Number} value 预置值
|
|
45
|
+
* @property {Boolean} breathe 是否开启呼吸效果,见上方说明(默认true)
|
|
46
|
+
* @property {Boolean} focus 是否自动获取焦点(默认false)
|
|
47
|
+
* @property {Boolean} bold 字体和输入横线是否加粗(默认true)
|
|
48
|
+
* @property {String Number} font-size 字体大小,单位rpx(默认60)
|
|
49
|
+
* @property {String} active-color 当前激活输入框的样式(默认#2979ff)
|
|
50
|
+
* @property {String} inactive-color 非激活输入框的样式,文字颜色同此值(默认#606266)
|
|
51
|
+
* @property {String | Number} width 输入框宽度,单位rpx,高等于宽(默认80)
|
|
52
|
+
* @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘(默认false)
|
|
53
|
+
* @event {Function} change 输入内容发生改变时触发,具体见官网说明
|
|
54
|
+
* @event {Function} finish 输入字符个数达maxlength值时触发,见官网说明
|
|
55
|
+
* @example <u-message-input mode="bottomLine"></u-message-input>
|
|
56
|
+
*/
|
|
57
|
+
export default {
|
|
58
|
+
name: "u-message-input",
|
|
59
|
+
props: {
|
|
60
|
+
// 最大输入长度
|
|
61
|
+
maxlength: {
|
|
62
|
+
type: [Number, String],
|
|
63
|
+
default: 4
|
|
64
|
+
},
|
|
65
|
+
// 是否用圆点填充
|
|
66
|
+
dotFill: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: false
|
|
69
|
+
},
|
|
70
|
+
// 显示模式,box-盒子模式,bottomLine-横线在底部模式,middleLine-横线在中部模式
|
|
71
|
+
mode: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: "box"
|
|
74
|
+
},
|
|
75
|
+
// 预置值
|
|
76
|
+
modelValue: {
|
|
77
|
+
type: [String, Number],
|
|
78
|
+
default: ''
|
|
79
|
+
},
|
|
80
|
+
// 当前激活输入item,是否带有呼吸效果
|
|
81
|
+
breathe: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: true
|
|
84
|
+
},
|
|
85
|
+
// 是否自动获取焦点
|
|
86
|
+
focus: {
|
|
87
|
+
type: Boolean,
|
|
88
|
+
default: false
|
|
89
|
+
},
|
|
90
|
+
// 字体是否加粗
|
|
91
|
+
bold: {
|
|
92
|
+
type: Boolean,
|
|
93
|
+
default: false
|
|
94
|
+
},
|
|
95
|
+
// 字体大小
|
|
96
|
+
fontSize: {
|
|
97
|
+
type: [String, Number],
|
|
98
|
+
default: 60
|
|
99
|
+
},
|
|
100
|
+
// 激活样式
|
|
101
|
+
activeColor: {
|
|
102
|
+
type: String,
|
|
103
|
+
default: '#2979ff'
|
|
104
|
+
},
|
|
105
|
+
// 未激活的样式
|
|
106
|
+
inactiveColor: {
|
|
107
|
+
type: String,
|
|
108
|
+
default: '#606266'
|
|
109
|
+
},
|
|
110
|
+
// 输入框的大小,单位rpx,宽等于高
|
|
111
|
+
width: {
|
|
112
|
+
type: [Number, String],
|
|
113
|
+
default: '80'
|
|
114
|
+
},
|
|
115
|
+
// 是否隐藏原生键盘,如果想用自定义键盘的话,需设置此参数为true
|
|
116
|
+
disabledKeyboard: {
|
|
117
|
+
type: Boolean,
|
|
118
|
+
default: false
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
watch: {
|
|
122
|
+
// maxlength: {
|
|
123
|
+
// // 此值设置为true,会在组件加载后无需maxlength变化就会执行一次本监听函数,无需再created生命周期中处理
|
|
124
|
+
// immediate: true,
|
|
125
|
+
// handler(val) {
|
|
126
|
+
// this.maxlength = Number(val);
|
|
127
|
+
// }
|
|
128
|
+
// },
|
|
129
|
+
modelValue: {
|
|
130
|
+
immediate: true,
|
|
131
|
+
handler(val) {
|
|
132
|
+
// 转为字符串
|
|
133
|
+
val = String(val);
|
|
134
|
+
// 超出部分截掉
|
|
135
|
+
this.valueModel = val.substring(0, this.maxlength);
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
data() {
|
|
140
|
+
return {
|
|
141
|
+
valueModel: ""
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
emits: ['change', 'finish'],
|
|
145
|
+
computed: {
|
|
146
|
+
// 是否显示呼吸灯效果
|
|
147
|
+
animationClass() {
|
|
148
|
+
return (index) => {
|
|
149
|
+
if (this.breathe && this.charArr.length == index) return 'u-breathe';
|
|
150
|
+
else return '';
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
// 用于显示字符
|
|
154
|
+
charArr() {
|
|
155
|
+
return this.valueModel.split('');
|
|
156
|
+
},
|
|
157
|
+
charArrLength() {
|
|
158
|
+
return this.charArr.length;
|
|
159
|
+
},
|
|
160
|
+
// 根据长度,循环输入框的个数,因为头条小程序数值不能用于v-for
|
|
161
|
+
loopCharArr() {
|
|
162
|
+
return new Array(this.maxlength);
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
methods: {
|
|
166
|
+
getVal(e) {
|
|
167
|
+
let {
|
|
168
|
+
value
|
|
169
|
+
} = e.detail
|
|
170
|
+
this.valueModel = value;
|
|
171
|
+
// 判断长度是否超出了maxlength值,理论上不会发生,因为input组件设置了maxlength属性值
|
|
172
|
+
if (String(value).length > this.maxlength) return;
|
|
173
|
+
// 未达到maxlength之前,发送change事件,达到后发送finish事件
|
|
174
|
+
this.$emit('change', value);
|
|
175
|
+
if (String(value).length == this.maxlength) {
|
|
176
|
+
this.$emit('finish', value);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
</script>
|
|
182
|
+
|
|
183
|
+
<style scoped lang="scss">
|
|
184
|
+
// 定义混入指令,用于在非nvue环境下的flex定义,因为nvue没有display属性,会报错
|
|
185
|
+
@mixin vue-flex($direction: row) {
|
|
186
|
+
/* #ifndef APP-NVUE */
|
|
187
|
+
display: flex;
|
|
188
|
+
flex-direction: $direction;
|
|
189
|
+
/* #endif */
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@keyframes breathe {
|
|
193
|
+
0% {
|
|
194
|
+
opacity: 0.3;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
50% {
|
|
198
|
+
opacity: 1;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
100% {
|
|
202
|
+
opacity: 0.3;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.u-char-box {
|
|
207
|
+
text-align: center;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.u-char-flex {
|
|
211
|
+
@include vue-flex;
|
|
212
|
+
justify-content: center;
|
|
213
|
+
flex-wrap: wrap;
|
|
214
|
+
position: relative;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.u-input {
|
|
218
|
+
position: absolute;
|
|
219
|
+
top: 0;
|
|
220
|
+
left: -100%;
|
|
221
|
+
width: 200%;
|
|
222
|
+
height: 100%;
|
|
223
|
+
text-align: left;
|
|
224
|
+
z-index: 9;
|
|
225
|
+
opacity: 0;
|
|
226
|
+
background: none;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.u-char-item {
|
|
230
|
+
position: relative;
|
|
231
|
+
width: 90rpx;
|
|
232
|
+
height: 90rpx;
|
|
233
|
+
margin: 10rpx 10rpx;
|
|
234
|
+
font-size: 60rpx;
|
|
235
|
+
font-weight: bold;
|
|
236
|
+
color: $u-main-color;
|
|
237
|
+
line-height: 90rpx;
|
|
238
|
+
@include vue-flex;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
align-items: center;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.u-middle-line {
|
|
244
|
+
border: none;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.u-box {
|
|
248
|
+
box-sizing: border-box;
|
|
249
|
+
border: 2rpx solid #cccccc;
|
|
250
|
+
border-radius: 6rpx;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.u-box-active {
|
|
254
|
+
overflow: hidden;
|
|
255
|
+
animation-timing-function: ease-in-out;
|
|
256
|
+
animation-duration: 1500ms;
|
|
257
|
+
animation-iteration-count: infinite;
|
|
258
|
+
animation-direction: alternate;
|
|
259
|
+
border: 2rpx solid $u-primary;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.u-middle-line-active {
|
|
263
|
+
background: $u-primary;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.u-breathe {
|
|
267
|
+
animation: breathe 2s infinite ease;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.u-placeholder-line {
|
|
271
|
+
/* #ifndef APP-NVUE */
|
|
272
|
+
display: none;
|
|
273
|
+
/* #endif */
|
|
274
|
+
position: absolute;
|
|
275
|
+
left: 50%;
|
|
276
|
+
top: 50%;
|
|
277
|
+
transform: translate(-50%, -50%);
|
|
278
|
+
width: 2rpx;
|
|
279
|
+
height: 40rpx;
|
|
280
|
+
background: #333333;
|
|
281
|
+
animation: twinkling 1.5s infinite ease;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.u-animation-breathe {
|
|
285
|
+
animation-name: breathe;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.u-dot {
|
|
289
|
+
font-size: 34rpx;
|
|
290
|
+
line-height: 34rpx;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.u-middle-line {
|
|
294
|
+
height: 4px;
|
|
295
|
+
background: #000000;
|
|
296
|
+
width: 80%;
|
|
297
|
+
position: absolute;
|
|
298
|
+
border-radius: 2px;
|
|
299
|
+
top: 50%;
|
|
300
|
+
left: 50%;
|
|
301
|
+
transform: translate(-50%, -50%);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.u-bottom-line-active {
|
|
305
|
+
background: $u-primary;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.u-bottom-line {
|
|
309
|
+
height: 4px;
|
|
310
|
+
background: #000000;
|
|
311
|
+
width: 80%;
|
|
312
|
+
position: absolute;
|
|
313
|
+
border-radius: 2px;
|
|
314
|
+
bottom: 0;
|
|
315
|
+
left: 50%;
|
|
316
|
+
transform: translate(-50%);
|
|
317
|
+
}
|
|
318
|
+
</style>
|
|
@@ -214,7 +214,7 @@ export default {
|
|
|
214
214
|
},
|
|
215
215
|
// 设置整体各列的columns的值
|
|
216
216
|
setColumns(columns) {
|
|
217
|
-
console.log(columns)
|
|
217
|
+
// console.log(columns)
|
|
218
218
|
this.innerColumns = uni.$u.deepClone(columns)
|
|
219
219
|
// 如果在设置各列数据时,没有被设置默认的各列索引defaultIndex,那么用0去填充它,数组长度为列的数量
|
|
220
220
|
if (this.innerIndex.length === 0) {
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
// APP-Vue和微信平台,通过computedStyle判断是否支持css sticky
|
|
156
|
-
// #ifdef APP-VUE || MP-WEIXIN
|
|
156
|
+
// #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO
|
|
157
157
|
this.cssSticky = await this.checkComputedStyle()
|
|
158
158
|
// #endif
|
|
159
159
|
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
// 在APP和微信小程序上,通过uni.createSelectorQuery可以判断是否支持css sticky
|
|
171
171
|
checkComputedStyle() {
|
|
172
172
|
// 方法内进行判断,避免在其他平台生成无用代码
|
|
173
|
-
// #ifdef APP-VUE || MP-WEIXIN
|
|
173
|
+
// #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO
|
|
174
174
|
return new Promise(resolve => {
|
|
175
175
|
uni.createSelectorQuery().in(this).select('.u-sticky').fields({
|
|
176
176
|
computedStyle: ["position"]
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
|
|
207
207
|
<style lang="scss" scoped>
|
|
208
208
|
.u-sticky {
|
|
209
|
-
/* #ifdef APP-VUE || MP-WEIXIN */
|
|
209
|
+
/* #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO */
|
|
210
210
|
// 此处默认写sticky属性,是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
|
|
211
211
|
position: sticky;
|
|
212
212
|
/* #endif */
|
|
@@ -199,6 +199,10 @@ function statusChange(newValue, oldValue, ownerInstance, instance) {
|
|
|
199
199
|
function sizeChange(newValue, oldValue, ownerInstance, instance) {
|
|
200
200
|
// wxs内的局部变量快照
|
|
201
201
|
var state = instance.getState()
|
|
202
|
+
// 临时防止nv_disabled报错
|
|
203
|
+
if (!state || !newValue) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
202
206
|
state.disabled = newValue.disabled
|
|
203
207
|
state.duration = newValue.duration
|
|
204
208
|
state.show = newValue.show
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// 定义一个一定时间后自动成功的promise,让调用nextTick方法处,进入下一个then方法
|
|
2
|
-
const
|
|
2
|
+
const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
|
|
3
3
|
// nvue动画模块实现细节抽离在外部文件
|
|
4
4
|
// #ifdef APP-NVUE
|
|
5
5
|
import animationMap from './nvue-ani-map.js'
|
|
@@ -20,7 +20,9 @@ const getClassNames = (name) => ({
|
|
|
20
20
|
// https://weex.apache.org/zh/docs/modules/animation.html#transition
|
|
21
21
|
const animation = uni.requireNativePlugin('animation')
|
|
22
22
|
const getStyle = (name) => animationMap[name]
|
|
23
|
-
// #endif
|
|
23
|
+
// #endif
|
|
24
|
+
|
|
25
|
+
import { nextTick } from 'vue'
|
|
24
26
|
|
|
25
27
|
export default {
|
|
26
28
|
methods: {
|
|
@@ -30,7 +32,7 @@ export default {
|
|
|
30
32
|
},
|
|
31
33
|
// #ifndef APP-NVUE
|
|
32
34
|
// vue版本的组件进场处理
|
|
33
|
-
|
|
35
|
+
async vueEnter() {
|
|
34
36
|
// 动画进入时的类名
|
|
35
37
|
const classNames = getClassNames(this.mode)
|
|
36
38
|
// 定义状态和发出动画进入前事件
|
|
@@ -39,7 +41,8 @@ export default {
|
|
|
39
41
|
this.inited = true
|
|
40
42
|
this.display = true
|
|
41
43
|
this.classes = classNames.enter
|
|
42
|
-
|
|
44
|
+
await nextTick();
|
|
45
|
+
{
|
|
43
46
|
// #ifdef H5
|
|
44
47
|
await uni.$u.sleep(20)
|
|
45
48
|
// #endif
|
|
@@ -50,10 +53,10 @@ export default {
|
|
|
50
53
|
this.$emit('afterEnter')
|
|
51
54
|
// 赋予组件enter-to类名
|
|
52
55
|
this.classes = classNames['enter-to']
|
|
53
|
-
}
|
|
56
|
+
}
|
|
54
57
|
},
|
|
55
58
|
// 动画离场处理
|
|
56
|
-
vueLeave() {
|
|
59
|
+
async vueLeave() {
|
|
57
60
|
// 如果不是展示状态,无需执行逻辑
|
|
58
61
|
if (!this.display) return
|
|
59
62
|
const classNames = getClassNames(this.mode)
|
|
@@ -63,19 +66,20 @@ export default {
|
|
|
63
66
|
// 获得类名
|
|
64
67
|
this.classes = classNames.leave
|
|
65
68
|
|
|
66
|
-
|
|
69
|
+
await nextTick();
|
|
70
|
+
{
|
|
67
71
|
// 动画正在离场的状态
|
|
68
72
|
this.transitionEnded = false
|
|
69
73
|
this.$emit('leave')
|
|
70
74
|
// 组件执行动画,到了执行的执行时间后,执行一些额外处理
|
|
71
75
|
setTimeout(this.onTransitionEnd, this.duration)
|
|
72
76
|
this.classes = classNames['leave-to']
|
|
73
|
-
}
|
|
77
|
+
}
|
|
74
78
|
},
|
|
75
79
|
// #endif
|
|
76
80
|
// #ifdef APP-NVUE
|
|
77
81
|
// nvue版本动画进场
|
|
78
|
-
nvueEnter() {
|
|
82
|
+
async nvueEnter() {
|
|
79
83
|
// 获得样式的名称
|
|
80
84
|
const currentStyle = getStyle(this.mode)
|
|
81
85
|
// 组件动画状态和发出事件
|
|
@@ -90,11 +94,12 @@ export default {
|
|
|
90
94
|
opacity: 0
|
|
91
95
|
}
|
|
92
96
|
// 等待弹窗内容渲染完成
|
|
93
|
-
|
|
97
|
+
await nextTick();
|
|
98
|
+
{
|
|
94
99
|
// 合并样式
|
|
95
100
|
this.viewStyle = currentStyle.enter
|
|
96
101
|
Promise.resolve()
|
|
97
|
-
.then(
|
|
102
|
+
.then(waitTick)
|
|
98
103
|
.then(() => {
|
|
99
104
|
// 组件开始进入前的事件
|
|
100
105
|
this.$emit('enter')
|
|
@@ -111,7 +116,7 @@ export default {
|
|
|
111
116
|
})
|
|
112
117
|
})
|
|
113
118
|
.catch(() => {})
|
|
114
|
-
}
|
|
119
|
+
}
|
|
115
120
|
},
|
|
116
121
|
nvueLeave() {
|
|
117
122
|
if (!this.display) {
|
|
@@ -125,7 +130,7 @@ export default {
|
|
|
125
130
|
this.viewStyle = currentStyle.leave
|
|
126
131
|
// 放到promise中处理执行过程
|
|
127
132
|
Promise.resolve()
|
|
128
|
-
.then(
|
|
133
|
+
.then(waitTick) // 等待几十ms
|
|
129
134
|
.then(() => {
|
|
130
135
|
this.transitionEnded = false
|
|
131
136
|
// 动画正在离场的状态
|
package/index.scss
CHANGED
package/libs/css/flex.scss
CHANGED
|
@@ -255,3 +255,42 @@
|
|
|
255
255
|
flex-shrink: 1
|
|
256
256
|
}
|
|
257
257
|
|
|
258
|
+
// 定义内外边距,历遍1-80
|
|
259
|
+
@for $i from 0 through 80 {
|
|
260
|
+
// 只要双数和能被5除尽的数
|
|
261
|
+
@if $i % 2 == 0 or $i % 5 == 0 {
|
|
262
|
+
// 得出:u-margin-30或者u-m-30
|
|
263
|
+
.u-margin-#{$i}, .u-m-#{$i} {
|
|
264
|
+
margin: $i + rpx!important;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
// 得出:u-padding-30或者u-p-30
|
|
268
|
+
.u-padding-#{$i}, .u-p-#{$i} {
|
|
269
|
+
padding: $i + rpx!important;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
@each $short, $long in l left, t top, r right, b bottom {
|
|
273
|
+
// 缩写版,结果如: u-m-l-30
|
|
274
|
+
// 定义外边距
|
|
275
|
+
.u-m-#{$short}-#{$i} {
|
|
276
|
+
margin-#{$long}: $i + rpx!important;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// 定义内边距
|
|
280
|
+
.u-p-#{$short}-#{$i} {
|
|
281
|
+
padding-#{$long}: $i + rpx!important;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
// 完整版,结果如:u-margin-left-30
|
|
285
|
+
// 定义外边距
|
|
286
|
+
.u-margin-#{$long}-#{$i} {
|
|
287
|
+
margin-#{$long}: $i + rpx!important;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
// 定义内边距
|
|
291
|
+
.u-padding-#{$long}-#{$i} {
|
|
292
|
+
padding-#{$long}: $i + rpx!important;
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
}
|
|
@@ -28,6 +28,10 @@ platform = 'nvue'
|
|
|
28
28
|
platform = 'h5'
|
|
29
29
|
// #endif
|
|
30
30
|
|
|
31
|
+
// #ifdef MP
|
|
32
|
+
platform = 'mp'
|
|
33
|
+
// #endif
|
|
34
|
+
|
|
31
35
|
// #ifdef MP-WEIXIN
|
|
32
36
|
platform = 'weixin'
|
|
33
37
|
// #endif
|
|
@@ -56,10 +60,6 @@ platform = 'kuaishou'
|
|
|
56
60
|
platform = '360'
|
|
57
61
|
// #endif
|
|
58
62
|
|
|
59
|
-
// #ifdef MP
|
|
60
|
-
platform = 'mp'
|
|
61
|
-
// #endif
|
|
62
|
-
|
|
63
63
|
// #ifdef QUICKAPP-WEBVIEW
|
|
64
64
|
platform = 'quickapp-webview'
|
|
65
65
|
// #endif
|