@neatui/vue 2.17.3 → 2.17.5
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
|
@@ -1,131 +1,136 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
2
|
+
<div
|
|
3
|
+
class="fekit-ipull-scroll"
|
|
4
|
+
:ui-scroll="`:y ${stable ? 'stable' : ''}`"
|
|
5
|
+
ref="root"
|
|
6
|
+
>
|
|
7
|
+
<div class="full">
|
|
4
8
|
<div class="fs-xs co-text o-mm" fekit-pullload-head="" v-if="pull">
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<
|
|
12
|
-
<!-- <span>正在刷新</span> -->
|
|
13
|
-
</div>
|
|
14
|
-
<div v-show="demo.store.pull === 3" ui-flex="row cm">
|
|
15
|
-
<span>刷新完成</span>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
<slot></slot>
|
|
19
|
-
<div class="fs-xs co-text o-mm mb-sm" fekit-pullload-foot="" v-if="load">
|
|
20
|
-
<transition name="fekit-pullload-fade" mode="out-in">
|
|
21
|
-
<div v-if="demo.store.load === 2" ui-flex="row cm">
|
|
9
|
+
<slot name="pull-head" :state="demo.store.pull">
|
|
10
|
+
<div v-show="demo.store.pull < 2" ui-flex="row cm">
|
|
11
|
+
<i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
|
|
12
|
+
<span v-show="demo.store.pull === 0">下拉刷新</span>
|
|
13
|
+
<span v-show="demo.store.pull === 1">松开加载</span>
|
|
14
|
+
</div>
|
|
15
|
+
<div v-show="demo.store.pull === 2" ui-flex="row cm">
|
|
22
16
|
<span ui-load="@d"></span>
|
|
23
|
-
<!-- <span>正在加载</span> -->
|
|
24
17
|
</div>
|
|
25
|
-
<div v-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
<div v-show="demo.store.pull === 3" ui-flex="row cm">
|
|
19
|
+
<span>刷新完成</span>
|
|
20
|
+
</div>
|
|
21
|
+
</slot>
|
|
22
|
+
</div>
|
|
23
|
+
<slot></slot>
|
|
24
|
+
<div class="fs-xs co-text o-mm my-sm" fekit-pullload-foot="" v-if="load">
|
|
25
|
+
<slot name="load-foot" :state="demo.store.load">
|
|
26
|
+
<transition name="fekit-pullload-fade" mode="out-in">
|
|
27
|
+
<div v-if="demo.store.load === 2" ui-flex="row cm">
|
|
28
|
+
<span ui-load="@d"></span>
|
|
29
|
+
</div>
|
|
30
|
+
<div v-else-if="demo.store.load === 3">没有更多了</div>
|
|
31
|
+
<div v-else> </div>
|
|
32
|
+
</transition>
|
|
33
|
+
</slot>
|
|
28
34
|
</div>
|
|
29
35
|
</div>
|
|
30
36
|
</div>
|
|
31
37
|
</template>
|
|
32
38
|
<script setup lang="ts">
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
: {}),
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
onMounted(() => {
|
|
74
|
-
if (root.value) {
|
|
75
|
-
demo.value?.listen(root.value);
|
|
76
|
-
if (props.pull) {
|
|
77
|
-
demo.value?.ispull();
|
|
39
|
+
import { onMounted, onBeforeUnmount, ref } from "vue";
|
|
40
|
+
import PullLoad, { Easing } from "@fekit/pullload";
|
|
41
|
+
const emits = defineEmits(["onpull", "onload"]);
|
|
42
|
+
const props: any = defineProps({
|
|
43
|
+
pull: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
default: false,
|
|
46
|
+
},
|
|
47
|
+
load: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: false,
|
|
50
|
+
},
|
|
51
|
+
stable: {
|
|
52
|
+
type: Boolean,
|
|
53
|
+
default: false,
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
const root: any = ref(null);
|
|
57
|
+
const demo: any = ref(null);
|
|
58
|
+
demo.value = new PullLoad({
|
|
59
|
+
easing: Easing.easeOut,
|
|
60
|
+
friction: 0.3,
|
|
61
|
+
triggerDistance: 60,
|
|
62
|
+
loadingDistance: 50,
|
|
63
|
+
...(props.pull
|
|
64
|
+
? {
|
|
65
|
+
onpull: async () => {
|
|
66
|
+
emits("onpull", demo.value);
|
|
67
|
+
},
|
|
68
|
+
}
|
|
69
|
+
: {}),
|
|
70
|
+
...(props.load
|
|
71
|
+
? {
|
|
72
|
+
onload: async () => {
|
|
73
|
+
emits("onload", demo.value);
|
|
74
|
+
},
|
|
78
75
|
}
|
|
76
|
+
: {}),
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
onMounted(() => {
|
|
80
|
+
if (root.value) {
|
|
81
|
+
demo.value?.listen(root.value);
|
|
82
|
+
if (props.pull) {
|
|
83
|
+
demo.value?.ispull();
|
|
79
84
|
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
onBeforeUnmount(() => {
|
|
88
|
+
demo.value?.remove();
|
|
89
|
+
});
|
|
84
90
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
91
|
+
const pullload = () => {
|
|
92
|
+
demo.value?.ispull();
|
|
93
|
+
};
|
|
88
94
|
|
|
89
|
-
|
|
95
|
+
defineExpose({ pullload, ex: () => demo.value });
|
|
90
96
|
</script>
|
|
91
97
|
|
|
92
98
|
<style lang="scss">
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
99
|
+
.fekit-ipull-scroll {
|
|
100
|
+
[fekit-pullload-head],
|
|
101
|
+
[fekit-pullload-foot] {
|
|
102
|
+
position: absolute;
|
|
103
|
+
width: 100%;
|
|
104
|
+
height: 2em;
|
|
105
|
+
left: 0;
|
|
106
|
+
display: flex;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
align-items: center;
|
|
109
|
+
align-content: center;
|
|
110
|
+
}
|
|
111
|
+
[fekit-pullload-head] {
|
|
112
|
+
bottom: 100%;
|
|
113
|
+
margin-bottom: 1em;
|
|
114
|
+
}
|
|
115
|
+
[fekit-pullload-foot] {
|
|
116
|
+
position: relative;
|
|
117
|
+
}
|
|
113
118
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
119
|
+
.fekit-pullload-fade-enter-active,
|
|
120
|
+
.fekit-pullload-fade-leave-active {
|
|
121
|
+
transition: opacity 0.2s;
|
|
122
|
+
}
|
|
123
|
+
.fekit-pullload-fade-enter,
|
|
124
|
+
.fekit-pullload-fade-leave-to {
|
|
125
|
+
opacity: 0;
|
|
126
|
+
}
|
|
122
127
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
128
|
+
.pulldown {
|
|
129
|
+
transition: all 0.3s;
|
|
130
|
+
display: inline-block;
|
|
131
|
+
&.toup {
|
|
132
|
+
transform: rotate(180deg);
|
|
129
133
|
}
|
|
130
134
|
}
|
|
135
|
+
}
|
|
131
136
|
</style>
|
|
File without changes
|