uview-plus 3.1.51 → 3.2.3

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.
Files changed (50) hide show
  1. package/changelog.md +47 -0
  2. package/components/u-action-sheet/u-action-sheet.vue +1 -1
  3. package/components/u-album/u-album.vue +261 -261
  4. package/components/u-avatar/u-avatar.vue +3 -2
  5. package/components/u-avatar-group/u-avatar-group.vue +106 -106
  6. package/components/u-button/u-button.vue +12 -7
  7. package/components/u-calendar/u-calendar.vue +4 -3
  8. package/components/u-cell/u-cell.vue +6 -3
  9. package/components/u-checkbox/props.js +5 -0
  10. package/components/u-checkbox/u-checkbox.vue +27 -15
  11. package/components/u-code/u-code.vue +1 -1
  12. package/components/u-copy/u-copy.vue +70 -0
  13. package/components/u-dropdown/props.js +8 -14
  14. package/components/u-dropdown/u-dropdown.vue +202 -77
  15. package/components/u-dropdown-item/props.js +45 -36
  16. package/components/u-dropdown-item/u-dropdown-item.vue +121 -148
  17. package/components/u-form/u-form.vue +1 -1
  18. package/components/u-form-item/props.js +6 -1
  19. package/components/u-form-item/u-form-item.vue +1 -1
  20. package/components/u-gap/u-gap.vue +5 -4
  21. package/components/u-grid/u-grid.vue +4 -2
  22. package/components/u-grid-item/u-grid-item.vue +8 -7
  23. package/components/u-input/u-input.vue +1 -1
  24. package/components/u-lazy-load/u-lazy-load.vue +251 -0
  25. package/components/u-picker/u-picker.vue +4 -1
  26. package/components/u-popup/u-popup.vue +1 -1
  27. package/components/u-read-more/u-read-more.vue +164 -160
  28. package/components/u-slider/u-slider.vue +6 -6
  29. package/components/u-steps-item/u-steps-item.vue +318 -318
  30. package/components/u-subsection/u-subsection.vue +14 -8
  31. package/components/u-swiper/u-swiper.vue +6 -8
  32. package/components/u-tabs/u-tabs.vue +1 -0
  33. package/components/u-tag/props.js +5 -2
  34. package/components/u-text/u-text.vue +226 -226
  35. package/components/u-textarea/u-textarea.vue +275 -275
  36. package/components/u-transition/u-transition.vue +1 -1
  37. package/components/u-waterfall/u-waterfall.vue +225 -0
  38. package/index.js +5 -1
  39. package/libs/config/props/formItem.js +1 -0
  40. package/libs/config/props/tag.js +30 -29
  41. package/libs/css/common.scss +1 -1
  42. package/libs/css/components.scss +5 -5
  43. package/libs/function/colorGradient.js +8 -8
  44. package/libs/function/debounce.js +2 -2
  45. package/libs/function/digit.js +5 -5
  46. package/libs/function/index.js +29 -29
  47. package/libs/function/test.js +28 -28
  48. package/libs/function/throttle.js +2 -2
  49. package/libs/mixin/mixin.js +2 -2
  50. package/package.json +2 -2
@@ -1,106 +1,106 @@
1
- <template>
2
- <view class="u-avatar-group">
3
- <view
4
- class="u-avatar-group__item"
5
- v-for="(item, index) in showUrl"
6
- :key="index"
7
- :style="{
8
- marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
9
- }"
10
- >
11
- <u-avatar
12
- :size="size"
13
- :shape="shape"
14
- :mode="mode"
15
- :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item"
16
- ></u-avatar>
17
- <view
18
- class="u-avatar-group__item__show-more"
19
- v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
20
- @tap="clickHandler"
21
- >
22
- <u--text
23
- color="#ffffff"
24
- :size="size * 0.4"
25
- :text="`+${extraValue || urls.length - showUrl.length}`"
26
- align="center"
27
- customStyle="justify-content: center"
28
- ></u--text>
29
- </view>
30
- </view>
31
- </view>
32
- </template>
33
-
34
- <script>
35
- import props from './props.js';
36
- import mpMixin from '../../libs/mixin/mpMixin.js';
37
- import mixin from '../../libs/mixin/mixin.js';
38
- /**
39
- * AvatarGroup 头像组
40
- * @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
41
- * @tutorial https://ijry.github.io/uview-plus/components/avatar.html
42
- *
43
- * @property {Array} urls 头像图片组 (默认 [] )
44
- * @property {String | Number} maxCount 最多展示的头像数量 ( 默认 5 )
45
- * @property {String} shape 头像形状( 'circle' (默认) | 'square' )
46
- * @property {String} mode 图片裁剪模式(默认 'scaleToFill' )
47
- * @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
48
- * @property {String | Number} size 头像大小 (默认 40 )
49
- * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
50
- * @property {String | Number} gap 头像之间的遮挡比例(0.4代表遮挡40%) (默认 0.5 )
51
- * @property {String | Number} extraValue 需额外显示的值
52
- * @event {Function} showMore 头像组更多点击
53
- * @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
54
- */
55
- export default {
56
- name: 'u-avatar-group',
57
- mixins: [mpMixin, mixin, props],
58
- data() {
59
- return {
60
-
61
- }
62
- },
63
- computed: {
64
- showUrl() {
65
- return this.urls.slice(0, this.maxCount)
66
- }
67
- },
68
- emits: ["showMore"],
69
- methods: {
70
- clickHandler() {
71
- this.$emit('showMore')
72
- }
73
- },
74
- }
75
- </script>
76
-
77
- <style lang="scss" scoped>
78
- @import "../../libs/css/components.scss";
79
-
80
- .u-avatar-group {
81
- @include flex;
82
-
83
- &__item {
84
- margin-left: -10px;
85
- position: relative;
86
-
87
- &--no-indent {
88
- // 如果你想质疑作者不会使用:first-child,说明你太年轻,因为nvue不支持
89
- margin-left: 0;
90
- }
91
-
92
- &__show-more {
93
- position: absolute;
94
- top: 0;
95
- bottom: 0;
96
- left: 0;
97
- right: 0;
98
- background-color: rgba(0, 0, 0, 0.3);
99
- @include flex;
100
- align-items: center;
101
- justify-content: center;
102
- border-radius: 100px;
103
- }
104
- }
105
- }
106
- </style>
1
+ <template>
2
+ <view class="u-avatar-group">
3
+ <view
4
+ class="u-avatar-group__item"
5
+ v-for="(item, index) in showUrl"
6
+ :key="index"
7
+ :style="{
8
+ marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
9
+ }"
10
+ >
11
+ <u-avatar
12
+ :size="size"
13
+ :shape="shape"
14
+ :mode="mode"
15
+ :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item"
16
+ ></u-avatar>
17
+ <view
18
+ class="u-avatar-group__item__show-more"
19
+ v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
20
+ @tap="clickHandler"
21
+ >
22
+ <up-text
23
+ color="#ffffff"
24
+ :size="size * 0.4"
25
+ :text="`+${extraValue || urls.length - showUrl.length}`"
26
+ align="center"
27
+ customStyle="justify-content: center"
28
+ ></up-text>
29
+ </view>
30
+ </view>
31
+ </view>
32
+ </template>
33
+
34
+ <script>
35
+ import props from './props.js';
36
+ import mpMixin from '../../libs/mixin/mpMixin.js';
37
+ import mixin from '../../libs/mixin/mixin.js';
38
+ /**
39
+ * AvatarGroup 头像组
40
+ * @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
41
+ * @tutorial https://ijry.github.io/uview-plus/components/avatar.html
42
+ *
43
+ * @property {Array} urls 头像图片组 (默认 [] )
44
+ * @property {String | Number} maxCount 最多展示的头像数量 ( 默认 5 )
45
+ * @property {String} shape 头像形状( 'circle' (默认) | 'square' )
46
+ * @property {String} mode 图片裁剪模式(默认 'scaleToFill' )
47
+ * @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
48
+ * @property {String | Number} size 头像大小 (默认 40 )
49
+ * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
50
+ * @property {String | Number} gap 头像之间的遮挡比例(0.4代表遮挡40%) (默认 0.5 )
51
+ * @property {String | Number} extraValue 需额外显示的值
52
+ * @event {Function} showMore 头像组更多点击
53
+ * @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
54
+ */
55
+ export default {
56
+ name: 'u-avatar-group',
57
+ mixins: [mpMixin, mixin, props],
58
+ data() {
59
+ return {
60
+
61
+ }
62
+ },
63
+ computed: {
64
+ showUrl() {
65
+ return this.urls.slice(0, this.maxCount)
66
+ }
67
+ },
68
+ emits: ["showMore"],
69
+ methods: {
70
+ clickHandler() {
71
+ this.$emit('showMore')
72
+ }
73
+ },
74
+ }
75
+ </script>
76
+
77
+ <style lang="scss" scoped>
78
+ @import "../../libs/css/components.scss";
79
+
80
+ .u-avatar-group {
81
+ @include flex;
82
+
83
+ &__item {
84
+ margin-left: -10px;
85
+ position: relative;
86
+
87
+ &--no-indent {
88
+ // 如果你想质疑作者不会使用:first-child,说明你太年轻,因为nvue不支持
89
+ margin-left: 0;
90
+ }
91
+
92
+ &__show-more {
93
+ position: absolute;
94
+ top: 0;
95
+ bottom: 0;
96
+ left: 0;
97
+ right: 0;
98
+ background-color: rgba(0, 0, 0, 0.3);
99
+ @include flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ border-radius: 100px;
103
+ }
104
+ }
105
+ }
106
+ </style>
@@ -19,6 +19,7 @@
19
19
  @error="error"
20
20
  @opensetting="opensetting"
21
21
  @launchapp="launchapp"
22
+ @agreeprivacyauthorization="agreeprivacyauthorization"
22
23
  :hover-class="!disabled && !loading ? 'u-button--active' : ''"
23
24
  class="u-button u-reset-button"
24
25
  :style="[baseColor, $u.addStyle(customStyle)]"
@@ -108,7 +109,7 @@
108
109
  <!-- #endif -->
109
110
  </template>
110
111
 
111
- <script>
112
+ <script lang="ts">
112
113
  import button from "../../libs/mixin/button.js";
113
114
  import openType from "../../libs/mixin/openType.js";
114
115
  import mpMixin from '../../libs/mixin/mpMixin.js';
@@ -155,6 +156,7 @@ import props from "./props.js";
155
156
  * @event {Function} error 当使用开放能力时,发生错误的回调
156
157
  * @event {Function} opensetting 在打开授权设置页并关闭后回调
157
158
  * @event {Function} launchapp 打开 APP 成功的回调
159
+ * @event {Function} agreeprivacyauthorization 用户同意隐私协议事件回调
158
160
  * @example <u-button>月落</u-button>
159
161
  */
160
162
  export default {
@@ -263,7 +265,7 @@ export default {
263
265
  },
264
266
  },
265
267
  emits: ['click', 'getphonenumber', 'getuserinfo',
266
- 'error', 'opensetting', 'launchapp'],
268
+ 'error', 'opensetting', 'launchapp', 'agreeprivacyauthorization'],
267
269
  methods: {
268
270
  clickHandler() {
269
271
  // 非禁止并且非加载中,才能点击
@@ -275,21 +277,24 @@ export default {
275
277
  }
276
278
  },
277
279
  // 下面为对接uniapp官方按钮开放能力事件回调的对接
278
- getphonenumber(res) {
280
+ getphonenumber(res: any) {
279
281
  this.$emit("getphonenumber", res);
280
282
  },
281
- getuserinfo(res) {
283
+ getuserinfo(res: any) {
282
284
  this.$emit("getuserinfo", res);
283
285
  },
284
- error(res) {
286
+ error(res: any) {
285
287
  this.$emit("error", res);
286
288
  },
287
- opensetting(res) {
289
+ opensetting(res: any) {
288
290
  this.$emit("opensetting", res);
289
291
  },
290
- launchapp(res) {
292
+ launchapp(res: any) {
291
293
  this.$emit("launchapp", res);
292
294
  },
295
+ agreeprivacyauthorization(res) {
296
+ this.$emit("agreeprivacyauthorization", res);
297
+ },
293
298
  },
294
299
  };
295
300
  </script>
@@ -218,12 +218,13 @@ export default {
218
218
  }
219
219
  },
220
220
  init() {
221
- // 校验maxDate,不能小于当前时间
221
+ // 校验maxDate,不能小于minDate。
222
222
  if (
223
223
  this.innerMaxDate &&
224
- new Date(this.innerMaxDate).getTime() <= Date.now()
224
+ this.innerMinDate &&
225
+ new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
225
226
  ) {
226
- return uni.$u.error('maxDate不能小于当前时间')
227
+ return uni.$u.error('maxDate不能小于minDate时间')
227
228
  }
228
229
  // 滚动区域的高度
229
230
  this.listHeight = this.rowHeight * 5 + 30
@@ -48,6 +48,7 @@
48
48
  import props from './props.js';
49
49
  import mpMixin from '../../libs/mixin/mpMixin.js';
50
50
  import mixin from '../../libs/mixin/mixin.js';
51
+ import { addStyle } from '../../libs/function/index.js';
51
52
  /**
52
53
  * cell 单元格
53
54
  * @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
@@ -86,7 +87,7 @@
86
87
  mixins: [mpMixin, mixin, props],
87
88
  computed: {
88
89
  titleTextStyle() {
89
- return uni.$u.addStyle(this.titleStyle)
90
+ return addStyle(this.titleStyle)
90
91
  }
91
92
  },
92
93
  emits: ['click'],
@@ -109,7 +110,7 @@
109
110
  <style lang="scss" scoped>
110
111
  @import "../../libs/css/components.scss";
111
112
 
112
- $u-cell-padding: 10px 15px !default;
113
+ $u-cell-padding: 13px 15px !default;
113
114
  $u-cell-font-size: 15px !default;
114
115
  $u-cell-line-height: 24px !default;
115
116
  $u-cell-color: $u-main-color !default;
@@ -210,9 +211,11 @@
210
211
  }
211
212
  }
212
213
 
213
- &__value {
214
+ &__value {
214
215
  text-align: right;
216
+ /* #ifndef APP-NVUE */
215
217
  margin-left: auto;
218
+ /* #endif */
216
219
  font-size: $u-cell-value-font-size;
217
220
  line-height: $u-cell-line-height;
218
221
  color: $u-cell-value-color;
@@ -64,6 +64,11 @@ export default {
64
64
  labelDisabled: {
65
65
  type: [String, Boolean],
66
66
  default: () => uni.$u.props.checkbox.labelDisabled
67
+ },
68
+ // 是否独立使用
69
+ usedAlone: {
70
+ type: [Boolean],
71
+ default: () => false
67
72
  }
68
73
  }
69
74
  }
@@ -161,19 +161,23 @@
161
161
  style.width = uni.$u.addUnit(this.elSize)
162
162
  style.height = uni.$u.addUnit(this.elSize)
163
163
  // 如果是图标在右边的话,移除它的右边距
164
- if (this.parentData.iconPlacement === 'right') {
165
- style.marginRight = 0
164
+ if (!this.usedAlone) {
165
+ if (this.parentData.iconPlacement === 'right') {
166
+ style.marginRight = 0
167
+ }
166
168
  }
167
169
  return style
168
170
  },
169
171
  checkboxStyle() {
170
172
  const style = {}
171
- if (this.parentData.borderBottom && this.parentData.placement === 'row') {
172
- uni.$u.error('检测到您将borderBottom设置为true,需要同时将u-checkbox-group的placement设置为column才有效')
173
- }
174
- // 当父组件设置了显示下边框并且排列形式为纵向时,给内容和边框之间加上一定间隔
175
- if (this.parentData.borderBottom && this.parentData.placement === 'column') {
176
- style.paddingBottom = '8px'
173
+ if (!this.usedAlone) {
174
+ if (this.parentData.borderBottom && this.parentData.placement === 'row') {
175
+ uni.$u.error('检测到您将borderBottom设置为true,需要同时将u-checkbox-group的placement设置为column才有效')
176
+ }
177
+ // 当父组件设置了显示下边框并且排列形式为纵向时,给内容和边框之间加上一定间隔
178
+ if (this.parentData.borderBottom && this.parentData.placement === 'column') {
179
+ style.paddingBottom = '8px'
180
+ }
177
181
  }
178
182
  return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
179
183
  }
@@ -184,10 +188,12 @@
184
188
  emits: ["change"],
185
189
  methods: {
186
190
  init() {
187
- // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用
188
- this.updateParentData()
189
- if (!this.parent) {
190
- uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用')
191
+ if (!this.usedAlone) {
192
+ // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用
193
+ this.updateParentData()
194
+ if (!this.parent) {
195
+ uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用')
196
+ }
191
197
  }
192
198
  // #ifdef VUE2
193
199
  const value = this.parentData.value
@@ -198,7 +204,7 @@
198
204
  // 设置初始化时,是否默认选中的状态,父组件u-checkbox-group的value可能是array,所以额外判断
199
205
  if (this.checked) {
200
206
  this.isChecked = true
201
- } else if (uni.$u.test.array(value)) {
207
+ } else if (!this.usedAlone && uni.$u.test.array(value)) {
202
208
  // 查找数组是是否存在this.name元素值
203
209
  this.isChecked = value.some(item => {
204
210
  return item === this.name
@@ -210,7 +216,11 @@
210
216
  },
211
217
  // 横向两端排列时,点击组件即可触发选中事件
212
218
  wrapperClickHandler(e) {
213
- this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
219
+ if (!this.usedAlone) {
220
+ this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
221
+ } else {
222
+ this.iconClickHandler(e)
223
+ }
214
224
  },
215
225
  // 点击图标
216
226
  iconClickHandler(e) {
@@ -242,7 +252,9 @@
242
252
  // 将本组件标记为与原来相反的状态
243
253
  this.isChecked = !this.isChecked
244
254
  this.emitEvent()
245
- typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
255
+ if (!this.usedAlone) {
256
+ typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
257
+ }
246
258
  }
247
259
  },
248
260
  watch:{
@@ -77,7 +77,6 @@
77
77
  this.canGetCode = false
78
78
  // 这里放这句,是为了一开始时就提示,否则要等setInterval的1秒后才会有提示
79
79
  this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
80
- this.setTimeToStorage()
81
80
  this.timer = setInterval(() => {
82
81
  if (--this.secNum) {
83
82
  // 用当前倒计时的秒数替换提示字符串中的"x"字母
@@ -91,6 +90,7 @@
91
90
  this.canGetCode = true
92
91
  }
93
92
  }, 1000)
93
+ this.setTimeToStorage()
94
94
  },
95
95
  // 重置,可以让用户再次获取验证码
96
96
  reset() {
@@ -0,0 +1,70 @@
1
+ <template>
2
+ <view @click="handleClick">
3
+ <slot>复制</slot>
4
+ </view>
5
+ </template>
6
+ <script>
7
+ export default {
8
+ name: "xy-copy",
9
+ props: {
10
+ content: {
11
+ type: String,
12
+ default: ''
13
+ },
14
+ alertStyle: {
15
+ type: String,
16
+ default: 'toast'
17
+ },
18
+ notice: {
19
+ type: String,
20
+ default: '复制成功'
21
+ }
22
+ },
23
+ emits: ['success'],
24
+ methods: {
25
+ handleClick() {
26
+ let content = this.content;
27
+ if (!content) {
28
+ uni.showToast({
29
+ title: '暂无',
30
+ icon: 'none',
31
+ duration: 2000,
32
+ });
33
+ return false;
34
+ }
35
+ content = typeof content === 'string' ? content : content.toString() // 复制内容,必须字符串,数字需要转换为字符串
36
+ /**
37
+ * 小程序端 和 app端的复制逻辑
38
+ */
39
+ let that = this;
40
+ uni.setClipboardData({
41
+ data: content,
42
+ success: function() {
43
+ if (that.alertStyle == 'modal') {
44
+ uni.showModal({
45
+ title: '提示',
46
+ content: that.notice
47
+ });
48
+ } else {
49
+ uni.showToast({
50
+ title: that.notice,
51
+ icon: 'none'
52
+ });
53
+ }
54
+ that.$emit('success');
55
+ },
56
+ fail:function(){
57
+ uni.showToast({
58
+ title: '复制失败',
59
+ icon: 'none',
60
+ duration:3000,
61
+ });
62
+ }
63
+ });
64
+ }
65
+ }
66
+ }
67
+ </script>
68
+
69
+ <style lang="scss" scoped>
70
+ </style>
@@ -1,20 +1,14 @@
1
1
  export default {
2
2
  props: {
3
- // 标题选中时的样式
4
- activeStyle: {
5
- type: [String, Object],
6
- default: () => ({
7
- color: '#2979ff',
8
- fontSize: '14px'
9
- })
3
+ // 菜单标题和选项的激活态颜色
4
+ activeColor: {
5
+ type: String,
6
+ default: '#2979ff'
10
7
  },
11
- // 标题未选中时的样式
12
- inactiveStyle: {
13
- type: [String, Object],
14
- default: () => ({
15
- color: '#606266',
16
- fontSize: '14px'
17
- })
8
+ // 菜单标题和选项的未激活态颜色
9
+ inactiveColor: {
10
+ type: String,
11
+ default: '#606266'
18
12
  },
19
13
  // 点击遮罩是否关闭菜单
20
14
  closeOnClickMask: {