@10yun/cv-mobile-ui 0.5.30 → 0.5.31
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/package.json +5 -1
- package/ui-cv/components/cv-btn-base/cv-btn-base.vue +1 -1
- package/uview-plus/README.md +1 -1
- package/uview-plus/components/u-action-sheet/u-action-sheet.vue +8 -8
- package/uview-plus/components/u-album/u-album.vue +1 -1
- package/uview-plus/components/u-alert/u-alert.vue +5 -5
- package/uview-plus/components/u-app-update/u-app-update.vue +2 -2
- package/uview-plus/components/u-avatar/u-avatar.vue +2 -2
- package/uview-plus/components/u-avatar-group/u-avatar-group.vue +79 -3
- package/uview-plus/components/u-back-top/u-back-top.vue +4 -4
- package/uview-plus/components/u-badge/u-badge.vue +1 -1
- package/uview-plus/components/u-button/u-button.vue +8 -8
- package/uview-plus/components/u-button-wu/u-button-wu.vue +9 -9
- package/uview-plus/components/u-calendar/u-calendar.vue +5 -6
- package/uview-plus/components/u-car-keyboard/u-car-keyboard.vue +2 -2
- package/uview-plus/components/u-card/u-card.vue +139 -3
- package/uview-plus/components/u-cell/u-cell.vue +4 -4
- package/uview-plus/components/u-cell-group/u-cell-group.vue +2 -2
- package/uview-plus/components/u-checkbox/u-checkbox.vue +4 -4
- package/uview-plus/components/u-checkbox-group/u-checkbox-group.vue +1 -1
- package/uview-plus/components/u-code/u-code.vue +1 -1
- package/uview-plus/components/u-code-input/u-code-input.vue +1 -1
- package/uview-plus/components/u-col/u-col.vue +1 -1
- package/uview-plus/components/u-collapse/u-collapse.vue +2 -2
- package/uview-plus/components/u-collapse-item/u-collapse-item.vue +218 -3
- package/uview-plus/components/u-column-notice/u-column-notice.vue +3 -3
- package/uview-plus/components/u-count-down/u-count-down.vue +1 -1
- package/uview-plus/components/u-count-to/u-count-to.vue +1 -1
- package/uview-plus/components/u-datetime-picker/u-datetime-picker.vue +3 -3
- package/uview-plus/components/u-divider/u-divider.vue +3 -3
- package/uview-plus/components/u-dropdown/u-dropdown.vue +3 -3
- package/uview-plus/components/u-dropdown-item/u-dropdown-item.vue +1 -1
- package/uview-plus/components/u-empty/u-empty.vue +3 -3
- package/uview-plus/components/u-form-item/u-form-item.vue +4 -4
- package/uview-plus/components/u-gap/u-gap.vue +1 -1
- package/uview-plus/components/u-grid/u-grid.vue +1 -1
- package/uview-plus/components/u-grid-item/u-grid-item.vue +1 -1
- package/uview-plus/components/u-icon/u-icon.vue +1 -1
- package/uview-plus/components/u-icon/u-icon2.vue +1 -1
- package/uview-plus/components/u-image/u-image.vue +5 -5
- package/uview-plus/components/u-image-wu/u-image-wu.vue +5 -5
- package/uview-plus/components/u-index-anchor/u-index-anchor.vue +1 -1
- package/uview-plus/components/u-index-list/u-index-list.vue +2 -2
- package/uview-plus/components/u-input/u-input.vue +4 -4
- package/uview-plus/components/u-keyboard/u-keyboard.vue +6 -6
- package/uview-plus/components/u-lazy-load/u-lazy-load.vue +257 -3
- package/uview-plus/components/u-line/u-line.vue +1 -1
- package/uview-plus/components/u-line-progress/u-line-progress.vue +1 -1
- package/uview-plus/components/u-link/u-link.vue +1 -1
- package/uview-plus/components/u-list/u-list.vue +1 -1
- package/uview-plus/components/u-list-item/u-list-item.vue +1 -1
- package/uview-plus/components/u-loading-icon/u-loading-icon.vue +191 -3
- package/uview-plus/components/u-loading-page/u-loading-page.vue +4 -4
- package/uview-plus/components/u-loadmore/u-loadmore.vue +4 -4
- package/uview-plus/components/u-mask/u-mask.vue +120 -113
- package/uview-plus/components/u-message-input/u-message-input.vue +1 -1
- package/uview-plus/components/u-modal/u-modal.vue +6 -6
- package/uview-plus/components/u-navbar/u-navbar.vue +4 -4
- package/uview-plus/components/u-navbar-mini/u-navbar-mini.vue +2 -2
- package/uview-plus/components/u-navbar-wu/u-navbar-wu.vue +4 -4
- package/uview-plus/components/u-no-network/u-no-network.vue +5 -5
- package/uview-plus/components/u-notice-bar/u-notice-bar.vue +5 -5
- package/uview-plus/components/u-notify/u-notify.vue +6 -6
- package/uview-plus/components/u-number-box/u-number-box.vue +9 -3
- package/uview-plus/components/u-number-keyboard/u-number-keyboard.vue +1 -1
- package/uview-plus/components/u-overlay/u-overlay.vue +3 -3
- package/uview-plus/components/u-picker/u-picker.vue +5 -5
- package/uview-plus/components/u-popup/u-popup.vue +8 -8
- package/uview-plus/components/u-popup-wu/u-popup-wu.vue +7 -7
- package/uview-plus/components/u-radio/u-radio.vue +4 -4
- package/uview-plus/components/u-radio-group/u-radio-group.vue +1 -1
- package/uview-plus/components/u-rate/u-rate.vue +5 -5
- package/uview-plus/components/u-read-more/u-read-more.vue +126 -3
- package/uview-plus/components/u-row/u-row.vue +1 -1
- package/uview-plus/components/u-row-notice/u-row-notice.vue +3 -3
- package/uview-plus/components/u-safe-bottom/u-safe-bottom.vue +48 -3
- package/uview-plus/components/u-search/u-search.vue +4 -4
- package/uview-plus/components/u-select/u-select.vue +175 -3
- package/uview-plus/components/u-skeleton/u-skeleton.vue +3 -3
- package/uview-plus/components/u-sku-wu/u-sku-wu.vue +4 -4
- package/uview-plus/components/u-status-bar/u-status-bar.vue +1 -1
- package/uview-plus/components/u-steps/u-steps.vue +1 -1
- package/uview-plus/components/u-steps-item/u-steps-item.vue +7 -7
- package/uview-plus/components/u-sticky/u-sticky.vue +1 -1
- package/uview-plus/components/u-subsection/u-subsection.vue +1 -1
- package/uview-plus/components/u-swipe-action/u-swipe-action.vue +1 -1
- package/uview-plus/components/u-swipe-action-item/u-swipe-action-item.vue +3 -3
- package/uview-plus/components/u-swiper/u-swiper.vue +1 -1
- package/uview-plus/components/u-swiper-indicator/u-swiper-indicator.vue +1 -1
- package/uview-plus/components/u-switch/u-switch.vue +2 -2
- package/uview-plus/components/u-tabbar/u-tabbar.vue +2 -2
- package/uview-plus/components/u-tabbar-item/u-tabbar-item.vue +9 -4
- package/uview-plus/components/u-table/u-table.vue +1 -1
- package/uview-plus/components/u-tabs/u-tabs.vue +3 -3
- package/uview-plus/components/u-tag/u-tag.vue +5 -5
- package/uview-plus/components/u-text/u-text.vue +159 -3
- package/uview-plus/components/u-toast/u-toast.vue +8 -8
- package/uview-plus/components/u-tooltip/u-tooltip.vue +6 -6
- package/uview-plus/components/u-upload/u-upload.vue +10 -10
- package/uview-plus/components/u-waterfall/u-waterfall.vue +221 -3
- package/uview-plus/index.js +4 -2
- package/uview-plus/libs/ctocode/index.js +120 -0
- package/uview-plus/libs/function/index-wu.js +1 -34
- package/uview-plus/package.json +3 -3
- package/uview-plus/readme-wu.md +1 -1
- package/uview-plus/libs/function/cc.js +0 -66
|
@@ -1,3 +1,218 @@
|
|
|
1
|
-
<template>
|
|
2
1
|
<view class="u-collapse-item">
|
|
3
2
|
<u-cell
|
|
4
3
|
:title="$slots.title ? '' : title"
|
|
5
4
|
:value="value"
|
|
6
5
|
:label="label"
|
|
7
6
|
:icon="icon"
|
|
8
7
|
:isLink="isLink"
|
|
9
8
|
:clickable="clickable"
|
|
10
9
|
:border="parentData.border && showBorder"
|
|
11
10
|
@click="clickHandler"
|
|
12
11
|
:arrowDirection="expanded ? 'up' : 'down'"
|
|
13
12
|
:disabled="disabled"
|
|
14
13
|
:customClass="cellCustomClass"
|
|
15
14
|
:customStyle="cellCustomStyle"
|
|
16
15
|
>
|
|
17
16
|
<!-- 微信小程序不支持,因为微信中不支持 <slot name="title" #title />的写法 -->
|
|
18
17
|
<template #title>
|
|
19
18
|
<slot name="title">
|
|
20
19
|
<text v-if="!$slots.title && title">
|
|
21
20
|
{{ title }}
|
|
22
21
|
</text>
|
|
23
22
|
</slot>
|
|
24
23
|
</template>
|
|
25
24
|
<template #icon>
|
|
26
25
|
<slot name="icon">
|
|
27
26
|
<u-icon v-if="!$slots.icon && icon" :size="22" :name="icon"></u-icon>
|
|
28
27
|
</slot>
|
|
29
28
|
</template>
|
|
30
29
|
<template #value>
|
|
31
30
|
<slot name="value">
|
|
32
31
|
<text v-if="!$slots.value && value">
|
|
33
32
|
{{ value }}
|
|
34
33
|
</text>
|
|
35
34
|
</slot>
|
|
36
35
|
</template>
|
|
37
36
|
<template #right-icon>
|
|
38
37
|
<template v-if="showRight">
|
|
39
38
|
<u-icon v-if="!$slots['right-icon']" :size="16" name="arrow-right"></u-icon>
|
|
40
39
|
<slot name="right-icon"></slot>
|
|
41
40
|
</template>
|
|
42
41
|
</template>
|
|
43
42
|
</u-cell>
|
|
44
43
|
<view class="u-collapse-item__content" :animation="animationData" ref="animation">
|
|
45
44
|
<view class="u-collapse-item__content__text content-class" :id="elId" :ref="elId"><slot /></view>
|
|
46
45
|
</view>
|
|
47
46
|
<u-line v-if="parentData.border"></u-line>
|
|
48
47
|
</view>
|
|
49
48
|
* collapseItem 折叠面板Item
|
|
50
49
|
* @description 通过折叠面板收纳内容区域(搭配u-collapse使用)
|
|
51
50
|
* @tutorial https://ijry.github.io/uview-plus/components/collapse.html
|
|
52
51
|
* @property {String} title 标题
|
|
53
52
|
* @property {String} value 标题右侧内容
|
|
54
53
|
* @property {String} label 标题下方的描述信息
|
|
55
54
|
* @property {Boolean} disbled 是否禁用折叠面板 ( 默认 false )
|
|
56
55
|
* @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 ( 默认 true )
|
|
57
56
|
* @property {Boolean} clickable 是否开启点击反馈 ( 默认 true )
|
|
58
57
|
* @property {Boolean} border 是否显示内边框 ( 默认 true )
|
|
59
58
|
* @property {String} align 标题的对齐方式 ( 默认 'left' )
|
|
60
59
|
* @property {String | Number} name 唯一标识符
|
|
61
60
|
* @property {String} icon 标题左侧图片,可为绝对路径的图片或内置图标
|
|
62
61
|
* @event {Function} change 某个item被打开或者收起时触发
|
|
63
62
|
* @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
|
|
64
63
|
*/
|
|
65
64
|
name: 'u-collapse-item',
|
|
66
65
|
mixins: [mpMixin, mixin, props],
|
|
67
66
|
data() {
|
|
68
67
|
return {
|
|
69
68
|
elId: guid(),
|
|
70
69
|
// uni.createAnimation的导出数据
|
|
71
70
|
animationData: {},
|
|
72
71
|
// 是否展开状态
|
|
73
72
|
expanded: false,
|
|
74
73
|
// 根据expanded确定是否显示border,为了控制展开时,cell的下划线更好的显示效果,进行一定时间的延时
|
|
75
74
|
showBorder: false,
|
|
76
75
|
// 是否动画中,如果是则不允许继续触发点击
|
|
77
76
|
animating: false,
|
|
78
77
|
// 父组件u-collapse的参数
|
|
79
78
|
parentData: {
|
|
80
79
|
accordion: false,
|
|
81
80
|
border: false
|
|
82
81
|
}
|
|
83
82
|
};
|
|
84
83
|
},
|
|
85
84
|
watch: {
|
|
86
85
|
expanded(n) {
|
|
87
86
|
clearTimeout(this.timer);
|
|
88
87
|
this.timer = null;
|
|
89
88
|
// 这里根据expanded的值来进行一定的延时,是为了cell的下划线更好的显示效果
|
|
90
89
|
this.timer = setTimeout(
|
|
91
90
|
() => {
|
|
92
91
|
this.showBorder = n;
|
|
93
92
|
},
|
|
94
93
|
n ? 10 : 290
|
|
95
94
|
);
|
|
96
95
|
}
|
|
97
96
|
},
|
|
98
97
|
mounted() {
|
|
99
98
|
this.init();
|
|
100
99
|
// console.log('$slots', this.$slots)
|
|
101
100
|
},
|
|
102
101
|
methods: {
|
|
103
102
|
// 异步获取内容,或者动态修改了内容时,需要重新初始化
|
|
104
103
|
async init() {
|
|
105
104
|
// 初始化数据
|
|
106
105
|
this.updateParentData();
|
|
107
106
|
if (!this.parent) {
|
|
108
107
|
return error('u-collapse-item必须要搭配u-collapse组件使用');
|
|
109
108
|
}
|
|
110
109
|
const { value, accordion, children = [] } = this.parent;
|
|
111
110
|
if (accordion) {
|
|
112
111
|
if (test.array(value)) {
|
|
113
112
|
return error('手风琴模式下,u-collapse组件的value参数不能为数组');
|
|
114
113
|
}
|
|
115
114
|
this.expanded = this.name == value;
|
|
116
115
|
} else {
|
|
117
116
|
if (!test.array(value) && value !== null) {
|
|
118
117
|
return error('非手风琴模式下,u-collapse组件的value参数必须为数组');
|
|
119
118
|
}
|
|
120
119
|
this.expanded = (value || []).some((item) => item == this.name);
|
|
121
120
|
}
|
|
122
121
|
// 设置组件的展开或收起状态
|
|
123
122
|
await nextTick();
|
|
124
123
|
this.setContentAnimate();
|
|
125
124
|
},
|
|
126
125
|
updateParentData() {
|
|
127
126
|
// 此方法在mixin中
|
|
128
127
|
this.getParentData('u-collapse');
|
|
129
128
|
},
|
|
130
129
|
async setContentAnimate() {
|
|
131
130
|
// 每次面板打开或者收起时,都查询元素尺寸
|
|
132
131
|
// 好处是,父组件从服务端获取内容后,变更折叠面板后可以获得最新的高度
|
|
133
132
|
const rect = await this.queryRect();
|
|
134
133
|
const height = this.expanded ? rect.height : 0;
|
|
135
134
|
this.animating = true;
|
|
136
135
|
// #ifdef APP-NVUE
|
|
137
136
|
const ref = this.$refs['animation'].ref;
|
|
138
137
|
animation.transition(
|
|
139
138
|
ref,
|
|
140
139
|
{
|
|
141
140
|
styles: {
|
|
142
141
|
height: height + 'px'
|
|
143
142
|
},
|
|
144
143
|
duration: this.duration,
|
|
145
144
|
// 必须设置为true,否则会到面板收起或展开时,页面其他元素不会随之调整它们的布局
|
|
146
145
|
needLayout: true,
|
|
147
146
|
timingFunction: 'ease-in-out'
|
|
148
147
|
},
|
|
149
148
|
() => {
|
|
150
149
|
this.animating = false;
|
|
151
150
|
}
|
|
152
151
|
);
|
|
153
152
|
// #endif
|
|
154
153
|
// #ifndef APP-NVUE
|
|
155
154
|
const animation = uni.createAnimation({
|
|
156
155
|
timingFunction: 'ease-in-out'
|
|
157
156
|
});
|
|
158
157
|
animation
|
|
159
158
|
.height(height)
|
|
160
159
|
.step({
|
|
161
160
|
duration: this.duration
|
|
162
161
|
})
|
|
163
162
|
.step();
|
|
164
163
|
// 导出动画数据给面板的animationData值
|
|
165
164
|
this.animationData = animation.export();
|
|
166
165
|
// 标识动画结束
|
|
167
166
|
sleep(this.duration).then(() => {
|
|
168
167
|
this.animating = false;
|
|
169
168
|
});
|
|
170
169
|
// #endif
|
|
171
170
|
},
|
|
172
171
|
// 点击collapsehead头部
|
|
173
172
|
clickHandler() {
|
|
174
173
|
if (this.disabled && this.animating) return;
|
|
175
174
|
// 设置本组件为相反的状态
|
|
176
175
|
this.parent && this.parent.onChange(this);
|
|
177
176
|
},
|
|
178
177
|
// 查询内容高度
|
|
179
178
|
queryRect() {
|
|
180
179
|
// #ifndef APP-NVUE
|
|
181
180
|
// $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://ijry.github.io/uview-plus/js/getRect.html
|
|
182
181
|
// 组件内部一般用this.$uGetRect,对外的为uni.$u.getRect,二者功能一致,名称不同
|
|
183
182
|
return new Promise((resolve) => {
|
|
184
183
|
this.$uGetRect(`#${this.elId}`).then((size) => {
|
|
185
184
|
resolve(size);
|
|
186
185
|
});
|
|
187
186
|
});
|
|
188
187
|
// #endif
|
|
189
188
|
// #ifdef APP-NVUE
|
|
190
189
|
// nvue下,使用dom模块查询元素高度
|
|
191
190
|
// 返回一个promise,让调用此方法的主体能使用then回调
|
|
192
191
|
return new Promise((resolve) => {
|
|
193
192
|
dom.getComponentRect(this.$refs[this.elId], (res) => {
|
|
194
193
|
resolve(res.size);
|
|
195
194
|
});
|
|
196
195
|
});
|
|
197
196
|
// #endif
|
|
198
197
|
}
|
|
199
198
|
}
|
|
200
|
-
|
|
201
|
-
|
|
199
|
+
<template>
|
|
200
|
+
<view class="u-collapse-item">
|
|
201
|
+
<up-cell
|
|
202
|
+
:title="$slots.title ? '' : title"
|
|
203
|
+
:value="value"
|
|
204
|
+
:label="label"
|
|
205
|
+
:icon="icon"
|
|
206
|
+
:isLink="isLink"
|
|
207
|
+
:clickable="clickable"
|
|
208
|
+
:border="parentData.border && showBorder"
|
|
209
|
+
@click="clickHandler"
|
|
210
|
+
:arrowDirection="expanded ? 'up' : 'down'"
|
|
211
|
+
:disabled="disabled"
|
|
212
|
+
:customClass="cellCustomClass"
|
|
213
|
+
:customStyle="cellCustomStyle"
|
|
214
|
+
>
|
|
215
|
+
<!-- 微信小程序不支持,因为微信中不支持 <slot name="title" #title />的写法 -->
|
|
216
|
+
<template #title>
|
|
217
|
+
<slot name="title">
|
|
218
|
+
<text v-if="!$slots.title && title">
|
|
219
|
+
{{ title }}
|
|
220
|
+
</text>
|
|
221
|
+
</slot>
|
|
222
|
+
</template>
|
|
223
|
+
<template #icon>
|
|
224
|
+
<slot name="icon">
|
|
225
|
+
<up-icon v-if="!$slots.icon && icon" :size="22" :name="icon"></up-icon>
|
|
226
|
+
</slot>
|
|
227
|
+
</template>
|
|
228
|
+
<template #value>
|
|
229
|
+
<slot name="value">
|
|
230
|
+
<text v-if="!$slots.value && value">
|
|
231
|
+
{{ value }}
|
|
232
|
+
</text>
|
|
233
|
+
</slot>
|
|
234
|
+
</template>
|
|
235
|
+
<template #right-icon>
|
|
236
|
+
<template v-if="showRight">
|
|
237
|
+
<up-icon v-if="!$slots['right-icon']" :size="16" name="arrow-right"></up-icon>
|
|
238
|
+
<slot name="right-icon"></slot>
|
|
239
|
+
</template>
|
|
240
|
+
</template>
|
|
241
|
+
</up-cell>
|
|
242
|
+
<view class="u-collapse-item__content" :animation="animationData" ref="animation">
|
|
243
|
+
<view class="u-collapse-item__content__text content-class" :id="elId" :ref="elId"><slot /></view>
|
|
244
|
+
</view>
|
|
245
|
+
<up-line v-if="parentData.border"></up-line>
|
|
246
|
+
</view>
|
|
247
|
+
</template>
|
|
248
|
+
<script>
|
|
249
|
+
import { props } from './props.js';
|
|
250
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
251
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
252
|
+
import { nextTick } from 'vue';
|
|
253
|
+
import { guid, sleep, error } from '../../libs/function/index';
|
|
254
|
+
import test from '../../libs/function/test';
|
|
255
|
+
// #ifdef APP-NVUE
|
|
256
|
+
const animation = uni.requireNativePlugin('animation');
|
|
257
|
+
const dom = uni.requireNativePlugin('dom');
|
|
258
|
+
// #endif
|
|
259
|
+
/**
|
|
260
|
+
* collapseItem 折叠面板Item
|
|
261
|
+
* @description 通过折叠面板收纳内容区域(搭配u-collapse使用)
|
|
262
|
+
* @tutorial https://ijry.github.io/uview-plus/components/collapse.html
|
|
263
|
+
* @property {String} title 标题
|
|
264
|
+
* @property {String} value 标题右侧内容
|
|
265
|
+
* @property {String} label 标题下方的描述信息
|
|
266
|
+
* @property {Boolean} disbled 是否禁用折叠面板 ( 默认 false )
|
|
267
|
+
* @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 ( 默认 true )
|
|
268
|
+
* @property {Boolean} clickable 是否开启点击反馈 ( 默认 true )
|
|
269
|
+
* @property {Boolean} border 是否显示内边框 ( 默认 true )
|
|
270
|
+
* @property {String} align 标题的对齐方式 ( 默认 'left' )
|
|
271
|
+
* @property {String | Number} name 唯一标识符
|
|
272
|
+
* @property {String} icon 标题左侧图片,可为绝对路径的图片或内置图标
|
|
273
|
+
* @event {Function} change 某个item被打开或者收起时触发
|
|
274
|
+
* @example <up-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</up-collapse-item>
|
|
275
|
+
*/
|
|
276
|
+
export default {
|
|
277
|
+
name: 'u-collapse-item',
|
|
278
|
+
mixins: [mpMixin, mixin, props],
|
|
279
|
+
data() {
|
|
280
|
+
return {
|
|
281
|
+
elId: guid(),
|
|
282
|
+
// uni.createAnimation的导出数据
|
|
283
|
+
animationData: {},
|
|
284
|
+
// 是否展开状态
|
|
285
|
+
expanded: false,
|
|
286
|
+
// 根据expanded确定是否显示border,为了控制展开时,cell的下划线更好的显示效果,进行一定时间的延时
|
|
287
|
+
showBorder: false,
|
|
288
|
+
// 是否动画中,如果是则不允许继续触发点击
|
|
289
|
+
animating: false,
|
|
290
|
+
// 父组件u-collapse的参数
|
|
291
|
+
parentData: {
|
|
292
|
+
accordion: false,
|
|
293
|
+
border: false
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
},
|
|
297
|
+
watch: {
|
|
298
|
+
expanded(n) {
|
|
299
|
+
clearTimeout(this.timer);
|
|
300
|
+
this.timer = null;
|
|
301
|
+
// 这里根据expanded的值来进行一定的延时,是为了cell的下划线更好的显示效果
|
|
302
|
+
this.timer = setTimeout(
|
|
303
|
+
() => {
|
|
304
|
+
this.showBorder = n;
|
|
305
|
+
},
|
|
306
|
+
n ? 10 : 290
|
|
307
|
+
);
|
|
308
|
+
}
|
|
309
|
+
},
|
|
310
|
+
mounted() {
|
|
311
|
+
this.init();
|
|
312
|
+
// console.log('$slots', this.$slots)
|
|
313
|
+
},
|
|
314
|
+
methods: {
|
|
315
|
+
// 异步获取内容,或者动态修改了内容时,需要重新初始化
|
|
316
|
+
async init() {
|
|
317
|
+
// 初始化数据
|
|
318
|
+
this.updateParentData();
|
|
319
|
+
if (!this.parent) {
|
|
320
|
+
return error('u-collapse-item必须要搭配u-collapse组件使用');
|
|
321
|
+
}
|
|
322
|
+
const { value, accordion, children = [] } = this.parent;
|
|
323
|
+
if (accordion) {
|
|
324
|
+
if (test.array(value)) {
|
|
325
|
+
return error('手风琴模式下,u-collapse组件的value参数不能为数组');
|
|
326
|
+
}
|
|
327
|
+
this.expanded = this.name == value;
|
|
328
|
+
} else {
|
|
329
|
+
if (!test.array(value) && value !== null) {
|
|
330
|
+
return error('非手风琴模式下,u-collapse组件的value参数必须为数组');
|
|
331
|
+
}
|
|
332
|
+
this.expanded = (value || []).some((item) => item == this.name);
|
|
333
|
+
}
|
|
334
|
+
// 设置组件的展开或收起状态
|
|
335
|
+
await nextTick();
|
|
336
|
+
this.setContentAnimate();
|
|
337
|
+
},
|
|
338
|
+
updateParentData() {
|
|
339
|
+
// 此方法在mixin中
|
|
340
|
+
this.getParentData('u-collapse');
|
|
341
|
+
},
|
|
342
|
+
async setContentAnimate() {
|
|
343
|
+
// 每次面板打开或者收起时,都查询元素尺寸
|
|
344
|
+
// 好处是,父组件从服务端获取内容后,变更折叠面板后可以获得最新的高度
|
|
345
|
+
const rect = await this.queryRect();
|
|
346
|
+
const height = this.expanded ? rect.height : 0;
|
|
347
|
+
this.animating = true;
|
|
348
|
+
// #ifdef APP-NVUE
|
|
349
|
+
const ref = this.$refs['animation'].ref;
|
|
350
|
+
animation.transition(
|
|
351
|
+
ref,
|
|
352
|
+
{
|
|
353
|
+
styles: {
|
|
354
|
+
height: height + 'px'
|
|
355
|
+
},
|
|
356
|
+
duration: this.duration,
|
|
357
|
+
// 必须设置为true,否则会到面板收起或展开时,页面其他元素不会随之调整它们的布局
|
|
358
|
+
needLayout: true,
|
|
359
|
+
timingFunction: 'ease-in-out'
|
|
360
|
+
},
|
|
361
|
+
() => {
|
|
362
|
+
this.animating = false;
|
|
363
|
+
}
|
|
364
|
+
);
|
|
365
|
+
// #endif
|
|
366
|
+
// #ifndef APP-NVUE
|
|
367
|
+
const animation = uni.createAnimation({
|
|
368
|
+
timingFunction: 'ease-in-out'
|
|
369
|
+
});
|
|
370
|
+
animation
|
|
371
|
+
.height(height)
|
|
372
|
+
.step({
|
|
373
|
+
duration: this.duration
|
|
374
|
+
})
|
|
375
|
+
.step();
|
|
376
|
+
// 导出动画数据给面板的animationData值
|
|
377
|
+
this.animationData = animation.export();
|
|
378
|
+
// 标识动画结束
|
|
379
|
+
sleep(this.duration).then(() => {
|
|
380
|
+
this.animating = false;
|
|
381
|
+
});
|
|
382
|
+
// #endif
|
|
383
|
+
},
|
|
384
|
+
// 点击collapsehead头部
|
|
385
|
+
clickHandler() {
|
|
386
|
+
if (this.disabled && this.animating) return;
|
|
387
|
+
// 设置本组件为相反的状态
|
|
388
|
+
this.parent && this.parent.onChange(this);
|
|
389
|
+
},
|
|
390
|
+
// 查询内容高度
|
|
391
|
+
queryRect() {
|
|
392
|
+
// #ifndef APP-NVUE
|
|
393
|
+
// $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://ijry.github.io/uview-plus/js/getRect.html
|
|
394
|
+
// 组件内部一般用this.$uGetRect,对外的为uni.$u.getRect,二者功能一致,名称不同
|
|
395
|
+
return new Promise((resolve) => {
|
|
396
|
+
this.$uGetRect(`#${this.elId}`).then((size) => {
|
|
397
|
+
resolve(size);
|
|
398
|
+
});
|
|
399
|
+
});
|
|
400
|
+
// #endif
|
|
401
|
+
// #ifdef APP-NVUE
|
|
402
|
+
// nvue下,使用dom模块查询元素高度
|
|
403
|
+
// 返回一个promise,让调用此方法的主体能使用then回调
|
|
404
|
+
return new Promise((resolve) => {
|
|
405
|
+
dom.getComponentRect(this.$refs[this.elId], (res) => {
|
|
406
|
+
resolve(res.size);
|
|
407
|
+
});
|
|
408
|
+
});
|
|
409
|
+
// #endif
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
};
|
|
413
|
+
</script>
|
|
414
|
+
<style scoped>
|
|
415
|
+
@import './style.css';
|
|
416
|
+
</style>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<view class="u-notice" @tap="clickHandler">
|
|
3
3
|
<slot name="icon">
|
|
4
4
|
<view class="u-notice__left-icon" v-if="icon">
|
|
5
|
-
<
|
|
5
|
+
<up-icon :name="icon" :color="color" size="19"></up-icon>
|
|
6
6
|
</view>
|
|
7
7
|
</slot>
|
|
8
8
|
<swiper
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
</swiper-item>
|
|
25
25
|
</swiper>
|
|
26
26
|
<view class="u-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
|
|
27
|
-
<
|
|
28
|
-
<
|
|
27
|
+
<up-icon v-if="mode === 'link'" name="arrow-right" :size="17" :color="color"></up-icon>
|
|
28
|
+
<up-icon v-if="mode === 'closable'" name="close" :size="16" :color="color" @click="close"></up-icon>
|
|
29
29
|
</view>
|
|
30
30
|
</view>
|
|
31
31
|
</template>
|
|
@@ -23,7 +23,7 @@ import { isSameSecond, parseFormat, parseTimeData } from './utils';
|
|
|
23
23
|
* @event {Function} start 开始倒计时
|
|
24
24
|
* @event {Function} pause 暂停倒计时
|
|
25
25
|
* @event {Function} reset 重设倒计时,若 auto-start 为 true,重设后会自动开始倒计时
|
|
26
|
-
* @example <
|
|
26
|
+
* @example <up-count-down :time="time"></up-count-down>
|
|
27
27
|
*/
|
|
28
28
|
export default {
|
|
29
29
|
name: 'u-count-down',
|
|
@@ -31,7 +31,7 @@ import { addUnit } from '../../libs/function/index';
|
|
|
31
31
|
* @property {Boolean} bold 字体是否加粗(默认 false )
|
|
32
32
|
* @property {String} separator 千位分隔符,见官网说明
|
|
33
33
|
* @event {Function} end 数值滚动到目标值时触发
|
|
34
|
-
* @example <
|
|
34
|
+
* @example <up-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></up-count-to>
|
|
35
35
|
*/
|
|
36
36
|
export default {
|
|
37
37
|
name: 'u-count-to',
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div class="input-cover"></div>
|
|
7
7
|
</slot>
|
|
8
8
|
</view>
|
|
9
|
-
<
|
|
9
|
+
<up-picker
|
|
10
10
|
ref="picker"
|
|
11
11
|
:show="show || (hasInput && showByClickInput)"
|
|
12
12
|
:popupMode="popupMode"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
<template #toolbar-bottom>
|
|
34
34
|
<slot name="toolbar-bottom"></slot>
|
|
35
35
|
</template>
|
|
36
|
-
</
|
|
36
|
+
</up-picker>
|
|
37
37
|
</view>
|
|
38
38
|
</template>
|
|
39
39
|
<script>
|
|
@@ -81,7 +81,7 @@ import test from '../../libs/function/test';
|
|
|
81
81
|
* @event {Function} confirm 点击确定按钮,返回当前选择的值
|
|
82
82
|
* @event {Function} change 当选择值变化时触发
|
|
83
83
|
* @event {Function} cancel 点击取消按钮
|
|
84
|
-
* @example <
|
|
84
|
+
* @example <up-datetime-picker :show="show" :value="value1" mode="datetime" ></up-datetime-picker>
|
|
85
85
|
*/
|
|
86
86
|
export default {
|
|
87
87
|
name: 'up-datetime-picker',
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="u-divider" :style="[addStyle(customStyle)]" @tap="click">
|
|
3
|
-
<
|
|
3
|
+
<up-line :color="lineColor" :customStyle="leftLineStyle" :hairline="hairline" :dashed="dashed"></up-line>
|
|
4
4
|
<text v-if="dot" class="u-divider__dot">●</text>
|
|
5
5
|
<text v-else-if="text" class="u-divider__text" :style="[textStyle]">{{ text }}</text>
|
|
6
|
-
<
|
|
6
|
+
<up-line :color="lineColor" :customStyle="rightLineStyle" :hairline="hairline" :dashed="dashed"></up-line>
|
|
7
7
|
</view>
|
|
8
8
|
</template>
|
|
9
9
|
<script>
|
|
@@ -26,7 +26,7 @@ import { addStyle, addUnit } from '../../libs/function/index';
|
|
|
26
26
|
* @property {Object} customStyle 定义需要用到的外部样式
|
|
27
27
|
*
|
|
28
28
|
* @event {Function} click divider组件被点击时触发
|
|
29
|
-
* @example <
|
|
29
|
+
* @example <up-divider :color="color">锦瑟无端五十弦</up-divider>
|
|
30
30
|
*/
|
|
31
31
|
export default {
|
|
32
32
|
name: 'u-divider',
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
'u-dropdown__menu__item__arrow--rotate': index === current
|
|
27
27
|
}"
|
|
28
28
|
>
|
|
29
|
-
<
|
|
29
|
+
<up-icon
|
|
30
30
|
:custom-style="{ display: 'flex' }"
|
|
31
31
|
:name="menuIcon"
|
|
32
32
|
:size="addUnit(menuIconSize)"
|
|
33
33
|
:color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"
|
|
34
|
-
></
|
|
34
|
+
></up-icon>
|
|
35
35
|
</view>
|
|
36
36
|
</view>
|
|
37
37
|
</view>
|
|
@@ -75,7 +75,7 @@ import { addUnit, getWindowInfo } from '../../libs/function/index';
|
|
|
75
75
|
* @property {String | Number} title-size 标题的字体大小,单位任意,数值默认为rpx单位(默认28)
|
|
76
76
|
* @event {Function} open 下拉菜单被打开时触发
|
|
77
77
|
* @event {Function} close 下拉菜单被关闭时触发
|
|
78
|
-
* @example <
|
|
78
|
+
* @example <up-dropdown></up-dropdown>
|
|
79
79
|
*/
|
|
80
80
|
export default {
|
|
81
81
|
name: 'u-dropdown',
|
|
@@ -44,7 +44,7 @@ import { addUnit, $parent } from '../../libs/function/index';
|
|
|
44
44
|
* @property {Boolean} disabled 是否禁用此选项卡(默认false)
|
|
45
45
|
* @property {String | Number} duration 选项卡展开和收起的过渡时间,单位ms(默认300)
|
|
46
46
|
* @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)(默认auto)
|
|
47
|
-
* @example <
|
|
47
|
+
* @example <up-dropdown-item title="标题"></up-dropdown-item>
|
|
48
48
|
*/
|
|
49
49
|
export default {
|
|
50
50
|
name: 'u-dropdown-item',
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="u-empty" :style="[emptyStyle]" v-if="show">
|
|
3
|
-
<
|
|
3
|
+
<up-icon
|
|
4
4
|
v-if="!isSrc"
|
|
5
5
|
:name="mode === 'message' ? 'chat' : `empty-${mode}`"
|
|
6
6
|
:size="iconSize"
|
|
7
7
|
:color="iconColor"
|
|
8
8
|
margin-top="14"
|
|
9
|
-
></
|
|
9
|
+
></up-icon>
|
|
10
10
|
<image
|
|
11
11
|
v-else
|
|
12
12
|
:style="{
|
|
@@ -47,7 +47,7 @@ import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
|
|
|
47
47
|
*
|
|
48
48
|
* @event {Function} click 点击组件时触发
|
|
49
49
|
* @event {Function} close 点击关闭按钮时触发
|
|
50
|
-
* @example <
|
|
50
|
+
* @example <up-empty text="所谓伊人,在水一方" mode="list"></up-empty>
|
|
51
51
|
*/
|
|
52
52
|
export default {
|
|
53
53
|
name: 'u-empty',
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<!-- nvue不支持伪元素before -->
|
|
27
27
|
<text v-if="required" class="u-form-item__body__left__content__required">*</text>
|
|
28
28
|
<view class="u-form-item__body__left__content__icon" v-if="leftIcon">
|
|
29
|
-
<
|
|
29
|
+
<up-icon :name="leftIcon" :custom-style="leftIconStyle"></up-icon>
|
|
30
30
|
</view>
|
|
31
31
|
<text
|
|
32
32
|
class="u-form-item__body__left__content__label"
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
{{ message }}
|
|
66
66
|
</text>
|
|
67
67
|
</slot>
|
|
68
|
-
<
|
|
68
|
+
<up-line
|
|
69
69
|
v-if="borderBottom"
|
|
70
70
|
:color="message && parentData.errorType === 'border-bottom' ? color.error : propsLine.color"
|
|
71
71
|
:customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
|
|
72
|
-
></
|
|
72
|
+
></up-line>
|
|
73
73
|
</view>
|
|
74
74
|
</template>
|
|
75
75
|
<script>
|
|
@@ -93,7 +93,7 @@ import { addStyle, addUnit, getProperty, setProperty, error } from '../../libs/f
|
|
|
93
93
|
* @property {String | Object} leftIconStyle 左侧图标的样式
|
|
94
94
|
* @property {Boolean} required 是否显示左边的必填星号,只作显示用,具体校验必填的逻辑,请在rules中配置 (默认 false )
|
|
95
95
|
*
|
|
96
|
-
* @example <
|
|
96
|
+
* @example <up-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></up-form-item>
|
|
97
97
|
*/
|
|
98
98
|
export default {
|
|
99
99
|
name: 'u-form-item',
|
|
@@ -16,7 +16,7 @@ import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
|
|
|
16
16
|
* @property {String | Number} marginBottom 与后一个组件的距离,单位px (默认 0 )
|
|
17
17
|
* @property {Object} customStyle 定义需要用到的外部样式
|
|
18
18
|
*
|
|
19
|
-
* @example <
|
|
19
|
+
* @example <up-gap height="80" bg-color="#bbb"></up-gap>
|
|
20
20
|
*/
|
|
21
21
|
export default {
|
|
22
22
|
name: 'u-gap',
|
|
@@ -17,7 +17,7 @@ import { addStyle, deepMerge } from '../../libs/function/index';
|
|
|
17
17
|
* @property {String} align 宫格对齐方式,表现为数量少的时候,靠左,居中,还是靠右 (默认 'left' )
|
|
18
18
|
* @property {Object} customStyle 定义需要用到的外部样式
|
|
19
19
|
* @event {Function} click 点击宫格触发
|
|
20
|
-
* @example <
|
|
20
|
+
* @example <up-grid :col="3" @click="click"></up-grid>
|
|
21
21
|
*/
|
|
22
22
|
export default {
|
|
23
23
|
name: 'u-grid',
|
|
@@ -31,7 +31,7 @@ import { addStyle, deepMerge } from '../../libs/function/index';
|
|
|
31
31
|
* @property {String} bgColor 宫格的背景颜色 (默认 'transparent' )
|
|
32
32
|
* @property {Object} customStyle 自定义样式,对象形式
|
|
33
33
|
* @event {Function} click 点击宫格触发
|
|
34
|
-
* @example <
|
|
34
|
+
* @example <up-grid-item></up-grid-item>
|
|
35
35
|
*/
|
|
36
36
|
export default {
|
|
37
37
|
name: 'u-grid-item',
|
|
@@ -53,7 +53,7 @@ import { addUnit, addStyle } from '../../libs/function/index';
|
|
|
53
53
|
* @property {Object} customStyle icon的样式,对象形式
|
|
54
54
|
* @event {Function} click 点击图标时触发
|
|
55
55
|
* @event {Function} touchstart 事件触摸时触发
|
|
56
|
-
* @example <
|
|
56
|
+
* @example <up-icon name="photo" color="#2979ff" size="28"></up-icon>
|
|
57
57
|
*/
|
|
58
58
|
export default {
|
|
59
59
|
name: 'u-icon',
|
|
@@ -58,7 +58,7 @@ import props from './props.js';
|
|
|
58
58
|
* @property {Object} customStyle icon的样式,对象形式
|
|
59
59
|
* @event {Function} click 点击图标时触发
|
|
60
60
|
* @event {Function} touchstart 事件触摸时触发
|
|
61
|
-
* @example <
|
|
61
|
+
* @example <up-icon name="photo" color="#2979ff" size="28"></up-icon>
|
|
62
62
|
*/
|
|
63
63
|
export default {
|
|
64
64
|
name: 'wu-icon',
|