af-mobile-client-vue3 1.3.14 → 1.3.15
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
CHANGED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref, watch } from 'vue'
|
|
3
|
+
import CardHeader from './CardHeader.vue'
|
|
4
|
+
|
|
5
|
+
const props = defineProps({
|
|
6
|
+
shadow: {
|
|
7
|
+
type: Boolean,
|
|
8
|
+
default: true,
|
|
9
|
+
},
|
|
10
|
+
className: {
|
|
11
|
+
type: String,
|
|
12
|
+
default: '',
|
|
13
|
+
},
|
|
14
|
+
title: {
|
|
15
|
+
type: String,
|
|
16
|
+
default: '',
|
|
17
|
+
},
|
|
18
|
+
collapsible: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: false,
|
|
21
|
+
},
|
|
22
|
+
defaultCollapsed: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: false,
|
|
25
|
+
},
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
const isCollapsed = ref(props.defaultCollapsed)
|
|
29
|
+
|
|
30
|
+
function handleToggle(collapsed: boolean) {
|
|
31
|
+
isCollapsed.value = collapsed
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// 过渡动画钩子函数
|
|
35
|
+
function onEnter(el: HTMLElement) {
|
|
36
|
+
el.style.height = '0'
|
|
37
|
+
el.style.overflow = 'hidden'
|
|
38
|
+
el.style.opacity = '0'
|
|
39
|
+
el.style.transformOrigin = 'top'
|
|
40
|
+
el.style.transform = 'scaleY(0.8)'
|
|
41
|
+
|
|
42
|
+
// 触发回流
|
|
43
|
+
void el.offsetHeight
|
|
44
|
+
|
|
45
|
+
el.style.transition = 'height 0.2s ease, opacity 0.2s ease, transform 0.2s ease'
|
|
46
|
+
el.style.height = `${el.scrollHeight}px`
|
|
47
|
+
el.style.opacity = '1'
|
|
48
|
+
el.style.transform = 'scaleY(1)'
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function onAfterEnter(el: HTMLElement) {
|
|
52
|
+
el.style.height = ''
|
|
53
|
+
el.style.overflow = ''
|
|
54
|
+
el.style.transition = ''
|
|
55
|
+
el.style.transformOrigin = ''
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function onBeforeLeave(el: HTMLElement) {
|
|
59
|
+
el.style.height = `${el.scrollHeight}px`
|
|
60
|
+
el.style.overflow = 'hidden'
|
|
61
|
+
el.style.transformOrigin = 'top'
|
|
62
|
+
|
|
63
|
+
// 触发回流
|
|
64
|
+
void el.offsetHeight
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function onLeave(el: HTMLElement) {
|
|
68
|
+
el.style.transition = 'height 0.2s ease, opacity 0.2s ease, transform 0.2s ease'
|
|
69
|
+
el.style.height = '0'
|
|
70
|
+
el.style.opacity = '0'
|
|
71
|
+
el.style.transform = 'scaleY(0.8)'
|
|
72
|
+
}
|
|
73
|
+
watch(() => props.defaultCollapsed, (newVal) => {
|
|
74
|
+
isCollapsed.value = newVal
|
|
75
|
+
})
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<template>
|
|
79
|
+
<div class="card-container" :class="[shadow ? 'with-shadow' : '', className]">
|
|
80
|
+
<CardHeader
|
|
81
|
+
v-if="title"
|
|
82
|
+
:title="title"
|
|
83
|
+
:collapsible="collapsible"
|
|
84
|
+
:default-collapsed="defaultCollapsed"
|
|
85
|
+
@toggle="handleToggle"
|
|
86
|
+
/>
|
|
87
|
+
<transition
|
|
88
|
+
name="collapse-transition"
|
|
89
|
+
@enter="onEnter"
|
|
90
|
+
@after-enter="onAfterEnter"
|
|
91
|
+
@before-leave="onBeforeLeave"
|
|
92
|
+
@leave="onLeave"
|
|
93
|
+
>
|
|
94
|
+
<div v-show="!isCollapsed" class="card-content">
|
|
95
|
+
<slot />
|
|
96
|
+
</div>
|
|
97
|
+
</transition>
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
100
|
+
|
|
101
|
+
<style lang="less" scoped>
|
|
102
|
+
.card-container {
|
|
103
|
+
background-color: #fff;
|
|
104
|
+
border-radius: 8px;
|
|
105
|
+
border: 1px solid #e5e7eb;
|
|
106
|
+
padding: 10px;
|
|
107
|
+
// margin-bottom: 0;
|
|
108
|
+
|
|
109
|
+
&.with-shadow {
|
|
110
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.card-content {
|
|
115
|
+
will-change: height, opacity, transform;
|
|
116
|
+
transform-origin: top;
|
|
117
|
+
}
|
|
118
|
+
</style>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
title: {
|
|
6
|
+
type: String,
|
|
7
|
+
required: true,
|
|
8
|
+
},
|
|
9
|
+
icon: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: '',
|
|
12
|
+
},
|
|
13
|
+
collapsible: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: false,
|
|
16
|
+
},
|
|
17
|
+
defaultCollapsed: {
|
|
18
|
+
type: Boolean,
|
|
19
|
+
default: false,
|
|
20
|
+
},
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
const emit = defineEmits(['toggle'])
|
|
24
|
+
|
|
25
|
+
const isCollapsed = ref(props.defaultCollapsed)
|
|
26
|
+
|
|
27
|
+
function toggleCollapse() {
|
|
28
|
+
if (props.collapsible) {
|
|
29
|
+
isCollapsed.value = !isCollapsed.value
|
|
30
|
+
emit('toggle', isCollapsed.value)
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<div class="card-header" @click="toggleCollapse">
|
|
37
|
+
<div class="card-header__title">
|
|
38
|
+
<slot name="icon">
|
|
39
|
+
<van-icon v-if="icon" class="card-header__icon" :name="icon" />
|
|
40
|
+
</slot>
|
|
41
|
+
<h4 class="card-header__text">
|
|
42
|
+
{{ title }}
|
|
43
|
+
</h4>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="card-header__extra">
|
|
46
|
+
<slot name="extra" />
|
|
47
|
+
<van-icon
|
|
48
|
+
v-if="collapsible"
|
|
49
|
+
class="card-header__collapse-icon"
|
|
50
|
+
:name="isCollapsed ? 'arrow-down' : 'arrow-up'"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<style lang="less" scoped>
|
|
57
|
+
.card-header {
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: space-between;
|
|
60
|
+
align-items: center;
|
|
61
|
+
margin-bottom: 8px;
|
|
62
|
+
padding-bottom: 6px;
|
|
63
|
+
border-bottom: 1px solid #f0f0f0;
|
|
64
|
+
|
|
65
|
+
&__title {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&__icon {
|
|
71
|
+
margin-right: 8px;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
color: #666;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&__text {
|
|
77
|
+
font-size: 14px;
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
color: #333;
|
|
80
|
+
margin: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&__extra {
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&__collapse-icon {
|
|
89
|
+
margin-left: 8px;
|
|
90
|
+
font-size: 14px;
|
|
91
|
+
color: #666;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
|
|
94
|
+
&:hover {
|
|
95
|
+
color: #333;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
</style>
|
package/src/hooks/useLoading.ts
CHANGED
|
@@ -3,7 +3,7 @@ import useBoolean from './useBoolean'
|
|
|
3
3
|
/**
|
|
4
4
|
* 加载状态管理 Hook
|
|
5
5
|
* @param initValue 初始加载状态，默认为 false
|
|
6
|
-
* @returns {
|
|
6
|
+
* @returns {object} 包含 loading 状态和控制方法
|
|
7
7
|
*/
|
|
8
8
|
export default function useLoading(initValue = false) {
|
|
9
9
|
const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue)
|
|
@@ -13,4 +13,4 @@ export default function useLoading(initValue = false) {
|
|
|
13
13
|
startLoading,
|
|
14
14
|
endLoading,
|
|
15
15
|
}
|
|
16
|
-
}
|
|
16
|
+
}
|