uview-plus 3.3.16 → 3.3.18

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 (10) hide show
  1. package/changelog.md +9 -0
  2. package/components/u-datetime-picker/u-datetime-picker.vue +9 -0
  3. package/components/u-grid/props.js +5 -0
  4. package/components/u-grid/u-grid.vue +1 -0
  5. package/components/u-picker/props.js +6 -1
  6. package/components/u-picker/u-picker.vue +7 -1
  7. package/components/u-swiper/u-swiper.vue +39 -36
  8. package/components/u-toolbar/props.js +5 -0
  9. package/components/u-toolbar/u-toolbar.vue +38 -18
  10. package/package.json +3 -3
package/changelog.md CHANGED
@@ -1,3 +1,12 @@
1
+ ## 3.3.18（2024-08-13）
2
+ feat: 新增支持datetime-picker工具栏插槽及picker插槽支持修复
3
+ ## 3.3.17（2024-08-12）
4
+ feat: swiper组件增加默认slot便于自定义
5
+
6
+ feat: grid新增间隔参数
7
+
8
+ feat: picker新增toolbar-right和toolbar-bottom插槽
9
+
1
10
  ## 3.3.16（2024-08-12）
2
11
  fix: 解决swiper中title换行后多余的内容未被遮挡问题
3
12
 
package/components/u-datetime-picker/u-datetime-picker.vue CHANGED
@@ -23,11 +23,20 @@
23
23
  :confirmText="confirmText"
24
24
  :cancelColor="cancelColor"
25
25
  :confirmColor="confirmColor"
26
+ :toolbarRightSlot="toolbarRightSlot"
26
27
  @close="close"
27
28
  @cancel="cancel"
28
29
  @confirm="confirm"
29
30
  @change="change"
30
31
  >
32
+ <template #toolbar-right>
33
+ <slot name="toolbar-right">
34
+ </slot>
35
+ </template>
36
+ <template #toolbar-bottom>
37
+ <slot name="toolbar-bottom">
38
+ </slot>
39
+ </template>
31
40
  </u-picker>
32
41
  </template>
33
42
 
package/components/u-grid/props.js CHANGED
@@ -16,6 +16,11 @@ export const props = defineMixin({
16
16
  align: {
17
17
  type: String,
18
18
  default: () => defProps.grid.align
19
+ },
20
+ // 间隔
21
+ gap: {
22
+ type: String,
23
+ default: '0px'
19
24
  }
20
25
  }
21
26
  })
package/components/u-grid/u-grid.vue CHANGED
@@ -107,6 +107,7 @@
107
107
  // 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
108
108
  /* #ifndef APP-NVUE */
109
109
  display: grid;
110
+ grid-gap: v-bind(gap);
110
111
  grid-template-columns: repeat(v-bind(col), 1fr);
111
112
  /* #endif */
112
113
  }
package/components/u-picker/props.js CHANGED
@@ -93,6 +93,11 @@ export const props = defineMixin({
93
93
  immediateChange: {
94
94
  type: Boolean,
95
95
  default: () => defProps.picker.immediateChange
96
- }
96
+ },
97
+ // 工具栏右侧插槽是否开启
98
+ toolbarRightSlot: {
99
+ type: Boolean,
100
+ default: false
101
+ },
97
102
  }
98
103
  })
package/components/u-picker/u-picker.vue CHANGED
@@ -20,9 +20,15 @@
20
20
  :cancelText="cancelText"
21
21
  :confirmText="confirmText"
22
22
  :title="title"
23
+ :rightSlot="toolbarRightSlot ? true : false"
23
24
  @cancel="cancel"
24
25
  @confirm="confirm"
25
- ></u-toolbar>
26
+ >
27
+ <template #right>
28
+ <slot name="toolbar-right"></slot>
29
+ </template>
30
+ </u-toolbar>
31
+ <slot name="toolbar-bottom"></slot>
26
32
  <picker-view
27
33
  class="u-picker__view"
28
34
  :indicatorStyle="`height: ${addUnit(itemHeight)}`"
package/components/u-swiper/u-swiper.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  class="u-swiper__loading"
12
12
  v-if="loading"
13
13
  >
14
- <u-loading-icon mode="circle"></u-loading-icon>
14
+ <up-loading-icon mode="circle"></up-loading-icon>
15
15
  </view>
16
16
  <swiper
17
17
  v-else
@@ -38,52 +38,55 @@
38
38
  v-for="(item, index) in list"
39
39
  :key="index"
40
40
  >
41
- <view
42
- class="u-swiper__wrapper__item__wrapper"
43
- :style="[itemStyle(index)]"
44
- >
45
- <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
46
- <image
47
- class="u-swiper__wrapper__item__wrapper__image"
48
- v-if="getItemType(item) === 'image'"
49
- :src="getSource(item)"
50
- :mode="imgMode"
51
- @tap="clickHandler(index)"
52
- :style="{
53
- height: addUnit(height),
54
- borderRadius: addUnit(radius)
55
- }"
56
- ></image>
57
- <video
58
- class="u-swiper__wrapper__item__wrapper__video"
59
- v-if="getItemType(item) === 'video'"
60
- :id="`video-${index}`"
61
- :enable-progress-gesture="false"
62
- :src="getSource(item)"
63
- :poster="getPoster(item)"
64
- :title="showTitle && testObject(item) && item.title ? item.title : ''"
65
- :style="{
66
- height: addUnit(height)
67
- }"
68
- controls
69
- @tap="clickHandler(index)"
70
- ></video>
71
- <view v-if="showTitle && testObject(item) && item.title && testImage(getSource(item))" class="u-swiper__wrapper__item__wrapper__title">
72
- <text class="u-line-1">{{ item.title }}</text>
41
+ <slot :item="item" :index="index">
42
+ <view
43
+ class="u-swiper__wrapper__item__wrapper"
44
+ :style="[itemStyle(index)]"
45
+ >
46
+ <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
47
+ <image
48
+ class="u-swiper__wrapper__item__wrapper__image"
49
+ v-if="getItemType(item) === 'image'"
50
+ :src="getSource(item)"
51
+ :mode="imgMode"
52
+ @tap="clickHandler(index)"
53
+ :style="{
54
+ height: addUnit(height),
55
+ borderRadius: addUnit(radius)
56
+ }"
57
+ ></image>
58
+ <video
59
+ class="u-swiper__wrapper__item__wrapper__video"
60
+ v-if="getItemType(item) === 'video'"
61
+ :id="`video-${index}`"
62
+ :enable-progress-gesture="false"
63
+ :src="getSource(item)"
64
+ :poster="getPoster(item)"
65
+ :title="showTitle && testObject(item) && item.title ? item.title : ''"
66
+ :style="{
67
+ height: addUnit(height)
68
+ }"
69
+ controls
70
+ @tap="clickHandler(index)"
71
+ ></video>
72
+ <view v-if="showTitle && testObject(item) && item.title && testImage(getSource(item))"
73
+ class="u-swiper__wrapper__item__wrapper__title">
74
+ <text class="u-line-1">{{ item.title }}</text>
75
+ </view>
73
76
  </view>
74
- </view>
77
+ </slot>
75
78
  </swiper-item>
76
79
  </swiper>
77
80
  <view class="u-swiper__indicator" :style="[addStyle(indicatorStyle)]">
78
81
  <slot name="indicator">
79
- <u-swiper-indicator
82
+ <up-swiper-indicator
80
83
  v-if="!loading && indicator && !showTitle"
81
84
  :indicatorActiveColor="indicatorActiveColor"
82
85
  :indicatorInactiveColor="indicatorInactiveColor"
83
86
  :length="list.length"
84
87
  :current="currentIndex"
85
88
  :indicatorMode="indicatorMode"
86
- ></u-swiper-indicator>
89
+ ></up-swiper-indicator>
87
90
  </slot>
88
91
  </view>
89
92
  </view>
package/components/u-toolbar/props.js CHANGED
@@ -31,6 +31,11 @@ export const props = defineMixin({
31
31
  title: {
32
32
  type: String,
33
33
  default: () => defProps.toolbar.title
34
+ },
35
+ // 开启右侧插槽
36
+ rightSlot: {
37
+ type: Boolean,
38
+ default: false
34
39
  }
35
40
  }
36
41
  })
package/components/u-toolbar/u-toolbar.vue CHANGED
@@ -5,32 +5,45 @@
5
5
  v-if="show"
6
6
  >
7
7
  <view
8
- class="u-toolbar__cancel__wrapper"
9
- hover-class="u-hover-class"
8
+ class="u-toolbar__left"
10
9
  >
11
- <text
12
- class="u-toolbar__wrapper__cancel"
13
- @tap="cancel"
14
- :style="{
15
- color: cancelColor
16
- }"
17
- >{{ cancelText }}</text>
10
+ <view
11
+ class="u-toolbar__cancel__wrapper"
12
+ hover-class="u-hover-class"
13
+ >
14
+ <text
15
+ class="u-toolbar__wrapper__cancel"
16
+ @tap="cancel"
17
+ :style="{
18
+ color: cancelColor
19
+ }"
20
+ >{{ cancelText }}</text>
21
+ </view>
18
22
  </view>
19
23
  <text
20
24
  class="u-toolbar__title u-line-1"
21
25
  v-if="title"
22
26
  >{{ title }}</text>
23
27
  <view
24
- class="u-toolbar__confirm__wrapper"
25
- hover-class="u-hover-class"
28
+ class="u-toolbar__right"
26
29
  >
27
- <text
28
- class="u-toolbar__wrapper__confirm"
29
- @tap="confirm"
30
- :style="{
31
- color: confirmColor
32
- }"
33
- >{{ confirmText }}</text>
30
+ <view
31
+ v-if="!rightSlot"
32
+ class="u-toolbar__confirm__wrapper"
33
+ hover-class="u-hover-class"
34
+ >
35
+ <text
36
+ class="u-toolbar__wrapper__confirm"
37
+ @tap="confirm"
38
+ :style="{
39
+ color: confirmColor
40
+ }"
41
+ >{{ confirmText }}</text>
42
+ </view>
43
+ <template v-else>
44
+ <slot name="right">
45
+ </slot>
46
+ </template>
34
47
  </view>
35
48
  </view>
36
49
  </template>
@@ -56,6 +69,9 @@
56
69
  name: 'u-toolbar',
57
70
  mixins: [mpMixin, mixin, props],
58
71
  emits: ["confirm", "cancel"],
72
+ created() {
73
+ console.log(this.$slots)
74
+ },
59
75
  methods: {
60
76
  // 点击取消按钮
61
77
  cancel() {
@@ -95,6 +111,10 @@
95
111
  }
96
112
 
97
113
  &__wrapper {
114
+ &__left,
115
+ &__right {
116
+ @include flex;
117
+ }
98
118
  &__confirm {
99
119
  color: $u-primary;
100
120
  font-size: 15px;
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "id": "uview-plus",
3
3
  "name": "uview-plus",
4
- "displayName": "uview-plus3.0重磅发布，全面的Vue3移动组件库。",
5
- "version": "3.3.16",
6
- "description": "uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
4
+ "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3移动组件库。",
5
+ "version": "3.3.18",
6
+ "description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
7
7
  "keywords": [
8
8
  "uview",
9
9
  "uview-plus",