uni-oaview 1.0.2 → 1.0.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.
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
<view>
|
|
3
3
|
<!-- 为了解决H5中v-if导致样式失效的问题,故使用v-show -->
|
|
4
4
|
<view v-show="loading">
|
|
5
|
-
<view
|
|
5
|
+
<view
|
|
6
|
+
class="skeleton"
|
|
7
|
+
:style="{ 'padding-top': paddingTop, 'padding-bottom': paddingBottom }"
|
|
8
|
+
:class="{ animate: animate }"
|
|
9
|
+
>
|
|
6
10
|
<view
|
|
7
11
|
v-if="displayAvatar"
|
|
8
12
|
class="skeleton-avatar"
|
|
@@ -16,7 +20,7 @@
|
|
|
16
20
|
v-for="(item, index) in rowList"
|
|
17
21
|
:key="index"
|
|
18
22
|
class="skeleton-row-item"
|
|
19
|
-
:style="{ width: item.width, height: rowHeight }"
|
|
23
|
+
:style="{ 'width': item.width, 'height': rowHeight, 'border-radius': borderRadius }"
|
|
20
24
|
></view>
|
|
21
25
|
</view>
|
|
22
26
|
</view>
|
|
@@ -56,11 +60,31 @@
|
|
|
56
60
|
type: String as PropType<'square' | 'round'>,
|
|
57
61
|
default: '',
|
|
58
62
|
},
|
|
63
|
+
rowWidth: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: () => '100%',
|
|
66
|
+
},
|
|
67
|
+
lastRowWidth: {
|
|
68
|
+
type: String,
|
|
69
|
+
default: () => '100%',
|
|
70
|
+
},
|
|
71
|
+
borderRadius: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: () => '0',
|
|
74
|
+
},
|
|
75
|
+
paddingTop: {
|
|
76
|
+
type: String,
|
|
77
|
+
default: () => '16rpx',
|
|
78
|
+
},
|
|
79
|
+
paddingBottom: {
|
|
80
|
+
type: String,
|
|
81
|
+
default: () => '16rpx',
|
|
82
|
+
},
|
|
59
83
|
});
|
|
60
84
|
const rowList = computed(() => {
|
|
61
85
|
const arr: Array<any> = [];
|
|
62
86
|
for (let i = 0; i < props.row; i++) {
|
|
63
|
-
arr.push({ width: i === props.row - 1 && i !== 0 ?
|
|
87
|
+
arr.push({ width: i === props.row - 1 && i !== 0 ? props.lastRowWidth : props.rowWidth });
|
|
64
88
|
}
|
|
65
89
|
return arr;
|
|
66
90
|
});
|
|
@@ -47,9 +47,14 @@
|
|
|
47
47
|
import Storage from './storage.vue';
|
|
48
48
|
import Console from './console.vue';
|
|
49
49
|
import System from './system.vue';
|
|
50
|
-
const whiteUrls = [
|
|
50
|
+
const whiteUrls = [
|
|
51
|
+
'http://192.168.11.231:6174',
|
|
52
|
+
'http://192.168.10.11:6174',
|
|
53
|
+
'http://dev-oa.ge.cn:6174',
|
|
54
|
+
'http://test-oa.ge.cn:6174',
|
|
55
|
+
];
|
|
51
56
|
const show = ref(false);
|
|
52
|
-
const isShowDebugButton = ref(whiteUrls.includes(uni.getStorageSync('baseUrl')));
|
|
57
|
+
const isShowDebugButton = ref(whiteUrls.includes(uni.getStorageSync('baseUrl')) || !!uni.getStorageSync('isDebug'));
|
|
53
58
|
const list = ref(['console', 'network', 'event', 'error', 'storage', 'system']);
|
|
54
59
|
const current = ref(0);
|
|
55
60
|
const openDebug = () => {
|
package/package.json
CHANGED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
$bg-color: white;
|
|
2
|
-
$row-height: 32rpx;
|
|
3
|
-
$row-margin-top: 32rpx;
|
|
4
|
-
|
|
5
|
-
.skeleton {
|
|
6
|
-
display: flex;
|
|
7
|
-
padding: 32rpx;
|
|
8
|
-
}
|
|
9
|
-
.skeleton-avatar {
|
|
10
|
-
flex-shrink: 0;
|
|
11
|
-
background: $bg-color;
|
|
12
|
-
margin-right: 16rpx;
|
|
13
|
-
}
|
|
14
|
-
.skeleton-avatar.round {
|
|
15
|
-
border-radius: 50%;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.skeleton-content {
|
|
19
|
-
width: 100%;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.skeleton-title {
|
|
23
|
-
background-color: $bg-color;
|
|
24
|
-
height: $row-height;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.skeleton-title + .skeleton-rows {
|
|
28
|
-
margin-top: $row-margin-top;
|
|
29
|
-
}
|
|
30
|
-
.skeleton-row-item {
|
|
31
|
-
background-color: $bg-color;
|
|
32
|
-
height: $row-height;
|
|
33
|
-
}
|
|
34
|
-
.skeleton-row-item:not(:first-child) {
|
|
35
|
-
margin-top: $row-margin-top;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.skeleton.animate {
|
|
39
|
-
animation: skeleton-blink 1.2s ease-in-out infinite;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@keyframes skeleton-blink {
|
|
43
|
-
0% {
|
|
44
|
-
opacity: 1;
|
|
45
|
-
}
|
|
46
|
-
50% {
|
|
47
|
-
opacity: 0.6;
|
|
48
|
-
}
|
|
49
|
-
100% {
|
|
50
|
-
opacity: 1;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<view>
|
|
3
|
-
<!-- 为了解决H5中v-if导致样式失效的问题,故使用v-show -->
|
|
4
|
-
<view v-show="loading">
|
|
5
|
-
<view class="skeleton" :class="{ animate: animate }">
|
|
6
|
-
<view
|
|
7
|
-
v-if="displayAvatar"
|
|
8
|
-
class="skeleton-avatar"
|
|
9
|
-
:class="[displayAvatarShape]"
|
|
10
|
-
:style="{ width: displayAvatarSize, height: displayAvatarSize }"
|
|
11
|
-
></view>
|
|
12
|
-
<view class="skeleton-content">
|
|
13
|
-
<view v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth, height: rowHeight }"></view>
|
|
14
|
-
<view class="skeleton-rows">
|
|
15
|
-
<view
|
|
16
|
-
v-for="(item, index) in rowList"
|
|
17
|
-
:key="index"
|
|
18
|
-
class="skeleton-row-item"
|
|
19
|
-
:style="{ width: item.width, height: rowHeight }"
|
|
20
|
-
></view>
|
|
21
|
-
</view>
|
|
22
|
-
</view>
|
|
23
|
-
</view>
|
|
24
|
-
</view>
|
|
25
|
-
<view v-show="!loading"><slot></slot></view>
|
|
26
|
-
</view>
|
|
27
|
-
</template>
|
|
28
|
-
|
|
29
|
-
<script lang="ts">
|
|
30
|
-
import { computed } from '@mk/composition-api';
|
|
31
|
-
import Vue from 'vue';
|
|
32
|
-
|
|
33
|
-
const DEFAULT_ROW_WIDTH = '100%';
|
|
34
|
-
const DEFAULT_LAST_ROW_WIDTH = '60%';
|
|
35
|
-
|
|
36
|
-
export default Vue.extend({
|
|
37
|
-
props: {
|
|
38
|
-
loading: {
|
|
39
|
-
type: Boolean,
|
|
40
|
-
default: false,
|
|
41
|
-
},
|
|
42
|
-
/** 是否展示图片 */
|
|
43
|
-
showAvatar: {
|
|
44
|
-
type: Boolean,
|
|
45
|
-
default: false,
|
|
46
|
-
},
|
|
47
|
-
/** 展示图片的尺寸 */
|
|
48
|
-
avatarSize: {
|
|
49
|
-
type: String,
|
|
50
|
-
default: '',
|
|
51
|
-
},
|
|
52
|
-
/** 图片的形状 */
|
|
53
|
-
avatarShape: {
|
|
54
|
-
type: String,
|
|
55
|
-
default: '', // square | round
|
|
56
|
-
},
|
|
57
|
-
/** 是否展示标题条 */
|
|
58
|
-
showTitle: {
|
|
59
|
-
type: Boolean,
|
|
60
|
-
default: false,
|
|
61
|
-
},
|
|
62
|
-
/** 标题条的宽度 */
|
|
63
|
-
titleWidth: {
|
|
64
|
-
type: String,
|
|
65
|
-
default: '40%',
|
|
66
|
-
},
|
|
67
|
-
/** 需要展示几行 */
|
|
68
|
-
row: {
|
|
69
|
-
type: Number,
|
|
70
|
-
default: 3,
|
|
71
|
-
},
|
|
72
|
-
/** 行高 */
|
|
73
|
-
rowHeight: {
|
|
74
|
-
type: String,
|
|
75
|
-
default: '32rpx',
|
|
76
|
-
},
|
|
77
|
-
/** 是否展示动画 */
|
|
78
|
-
animate: {
|
|
79
|
-
type: Boolean,
|
|
80
|
-
default: true,
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
setup(props: any) {
|
|
84
|
-
const rowList = computed(() => {
|
|
85
|
-
const arr: Array<any> = [];
|
|
86
|
-
for (let i = 0; i < props.row; i++) {
|
|
87
|
-
arr.push({ width: i === props.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH });
|
|
88
|
-
}
|
|
89
|
-
return arr;
|
|
90
|
-
});
|
|
91
|
-
const displayAvatar = computed(() => props.avatarShape || props.showAvatar || props.avatarSize);
|
|
92
|
-
const displayAvatarShape = computed(() => props.avatarShape || 'round');
|
|
93
|
-
const displayAvatarSize = computed(() => props.avatarSize || '100rpx');
|
|
94
|
-
return {
|
|
95
|
-
rowList,
|
|
96
|
-
displayAvatar,
|
|
97
|
-
displayAvatarShape,
|
|
98
|
-
displayAvatarSize,
|
|
99
|
-
};
|
|
100
|
-
},
|
|
101
|
-
});
|
|
102
|
-
</script>
|
|
103
|
-
|
|
104
|
-
<style lang="scss" scoped src="./skeleton.scss"></style>
|