Skip to content

Commit 4fb4197

Browse files
wenlngwenlng
committed
chroe: add methods of components and optimization of code
1 parent d15f8a5 commit 4fb4197

File tree

17 files changed

+379
-136
lines changed

17 files changed

+379
-136
lines changed

‎packages/components/button/index.vue

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const props = withDefaults(
3333
disabled?: boolean;
3434
type?: ButtonType;
3535
title?: string;
36+
[x: string]: any,
3637
}>(),
3738
{
3839
config: defaultConfig,

‎packages/components/click/hooks/handler.ts

+17-7
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import {reactive, toRaw} from "vue";
44
import {getDomXY} from "@/helper/helper";
55

66
export function useHandler(
7-
data: ClickData,
7+
_: ClickData,
88
event: ClickEvent,
9+
clearCbs: () => void
910
) {
1011
const dots = reactive<{list: Array<ClickDot>}>({list: []})
1112

@@ -44,29 +45,36 @@ export function useHandler(
4445
}
4546

4647
const closeEvent = (e: Event|any) => {
47-
event.close && event.close()
48-
resetData()
48+
close()
4949
e.cancelBubble = true
5050
e.preventDefault()
5151
return false
5252
}
5353

5454
const refreshEvent = (e: Event|any) => {
55-
event.refresh && event.refresh()
56-
resetData()
55+
refresh()
5756
e.cancelBubble = true
5857
e.preventDefault()
5958
return false
6059
}
6160

61+
const close = () => {
62+
event.close && event.close()
63+
resetData()
64+
}
65+
66+
const refresh = () => {
67+
event.refresh && event.refresh()
68+
resetData()
69+
}
70+
6271
const resetData = () => {
6372
dots.list = []
6473
}
6574

6675
const clearData = () => {
6776
resetData()
68-
data.thumb = ''
69-
data.image = ''
77+
clearCbs && clearCbs()
7078
}
7179

7280
return {
@@ -77,5 +85,7 @@ export function useHandler(
7785
refreshEvent,
7886
resetData,
7987
clearData,
88+
refresh,
89+
close,
8090
}
8191
}

‎packages/components/click/index.vue

+54-19
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,76 @@
11
<template>
22
<div
3-
:class="`go-captcha gc-wrapper ${localConfig.showTheme && 'gc-theme'}`"
4-
:style="wrapperStyles"
5-
v-show="hasDisplayWrapperState"
3+
:class="`go-captcha gc-wrapper ${localConfig.showTheme && 'gc-theme'}`"
4+
:style="wrapperStyles"
5+
v-show="hasDisplayWrapperState"
66
>
77
<div class="gc-header">
88
<span>{{ localConfig.title }}</span>
9-
<img v-show="hasDisplayImageState" :style="thumbStyles" :src="localData.thumb" alt="" />
9+
<img
10+
v-show="hasDisplayImageState"
11+
:style="thumbStyles"
12+
:src="localData.thumb"
13+
alt=""
14+
/>
1015
</div>
1116
<div class="gc-body" :style="imageStyles">
1217
<div class="gc-loading">
1318
<loading-icon />
1419
</div>
15-
<img :style="imageStyles" v-show="hasDisplayImageState" class="gc-picture" :src="localData.image" alt="" @click="handler.clickEvent"/>
20+
<img
21+
:style="imageStyles"
22+
v-show="hasDisplayImageState"
23+
class="gc-picture"
24+
:src="localData.image"
25+
@click="handler.clickEvent"
26+
alt=""
27+
/>
1628
<div class="gc-dots">
17-
<div class="gc-dot" v-for="dot in handler.dots.list" :key="`${dot.key + '-' + dot.index}`" :style="{
18-
top: (dot.y - ((localConfig.dotSize || 1)/2)-1) + 'px',
19-
left: (dot.x - ((localConfig.dotSize || 1)/2)-1) + 'px',
20-
}">{{dot.index}}</div>
29+
<div
30+
class="gc-dot"
31+
v-for="dot in handler.dots.list"
32+
:key="`${dot.key + '-' + dot.index}`"
33+
:style="{
34+
width: localConfig.dotSize + 'px',
35+
height: localConfig.dotSize + 'px',
36+
borderRadius: localConfig.dotSize + 'px',
37+
top: (dot.y - ((localConfig.dotSize || 1)/2)-1) + 'px',
38+
left: (dot.x - ((localConfig.dotSize || 1)/2)-1) + 'px',
39+
}"
40+
>{{dot.index}}</div>
2141
</div>
2242
</div>
2343
<div class="gc-footer">
2444
<div class="gc-icon-block gc-icon-block2">
25-
<close-icon :width="localConfig.iconSize" :height="localConfig.iconSize" @click="handler.closeEvent"/>
26-
<refresh-icon :width="localConfig.iconSize" :height="localConfig.iconSize" @click="handler.refreshEvent"/>
45+
<close-icon
46+
:width="localConfig.iconSize"
47+
:height="localConfig.iconSize"
48+
@click="handler.closeEvent"
49+
/>
50+
<refresh-icon
51+
:width="localConfig.iconSize"
52+
:height="localConfig.iconSize"
53+
@click="handler.refreshEvent"
54+
/>
2755
</div>
2856
<div class="gc-button-block">
29-
<button :class="!hasDisplayImageState && 'disabled'" @click="handler.confirmEvent">{{ localConfig.buttonText }}</button>
57+
<button
58+
:class="!hasDisplayImageState && 'disabled'"
59+
@click="handler.confirmEvent"
60+
>{{ localConfig.buttonText }}</button>
3061
</div>
3162
</div>
3263
</div>
3364
</template>
3465

3566
<script lang="ts" setup>
3667
import {computed, reactive, toRaw, watch} from "vue"
37-
import CloseIcon from "../../assets/icons/close-icon.vue";
68+
import {ClickConfig, defaultConfig} from "./meta/config";
3869
70+
import CloseIcon from "../../assets/icons/close-icon.vue";
3971
import RefreshIcon from "../../assets/icons/refresh-icon.vue";
4072
import LoadingIcon from "../../assets/icons/loading-icon.vue";
4173
42-
import {ClickConfig, defaultConfig} from "./meta/config";
4374
import {ClickData} from "./meta/data";
4475
import {ClickEvent} from "./meta/event";
4576
import {ClickExpose} from "./meta/expose";
@@ -51,6 +82,7 @@ const props = withDefaults(
5182
config?: ClickConfig;
5283
events?: ClickEvent,
5384
data: ClickData,
85+
[x: string]: any,
5486
}>(),
5587
{
5688
config: defaultConfig,
@@ -76,7 +108,10 @@ watch(() => props.config, (newData, _) => {
76108
Object.assign(localConfig, newData)
77109
},{ deep: true })
78110
79-
const handler = useHandler(localData, localEvent);
111+
const handler = useHandler(localData, localEvent, () => {
112+
localData.thumb = ''
113+
localData.image = ''
114+
});
80115
81116
const wrapperStyles = computed(() => {
82117
const hPadding = localConfig.horizontalPadding || 0
@@ -107,7 +142,7 @@ const imageStyles = computed(() => {
107142
})
108143
109144
const hasDisplayImageState = computed(() => {
110-
return localData.image != '' && localData.thumb != ''
145+
return localData.image != '' || localData.thumb != ''
111146
})
112147
113148
const hasDisplayWrapperState = computed(() => {
@@ -117,8 +152,8 @@ const hasDisplayWrapperState = computed(() => {
117152
defineExpose<ClickExpose>({
118153
reset: handler.resetData,
119154
clear: handler.clearData,
120-
refresh: handler.refreshEvent,
121-
close: handler.closeEvent,
155+
refresh: handler.refresh,
156+
close: handler.close,
122157
});
123158
</script>
124159

@@ -151,7 +186,7 @@ defineExpose<ClickExpose>({
151186
-ms-flex-align:center;
152187
align-items: center;
153188
justify-content: center;
154-
border-radius: 20px;
189+
border-radius: 22px;
155190
cursor: default;
156191
}
157192
}

‎packages/components/click/meta/expose.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
**/
66

77
export interface ClickExpose {
8-
reset: Function,
9-
clear: Function,
10-
refresh: Function,
11-
close: Function,
8+
reset: () => void,
9+
clear: () => void,
10+
refresh: () => void,
11+
close: () => void,
1212
}

‎packages/components/rotate/hooks/handler.ts

+18-10
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function useHandler(
1111
rootRef: Ref,
1212
dragBlockRef: Ref,
1313
dragBarRef: Ref,
14+
clearCbs: () => void
1415
) {
1516
const state = reactive<{dragLeft: number, thumbAngle: number, isFreeze: boolean}>({dragLeft: 0, thumbAngle: data.angle || 0, isFreeze: false})
1617

@@ -51,6 +52,7 @@ export function useHandler(
5152
} else {
5253
left = e.clientX - startX
5354
}
55+
5456
angle = data.angle + (left * p)
5557

5658
if (left >= maxWidth) {
@@ -85,7 +87,7 @@ export function useHandler(
8587

8688
clearEvent()
8789

88-
if (currentAngle <= 0) {
90+
if (currentAngle < 0) {
8991
return
9092
}
9193

@@ -124,7 +126,6 @@ export function useHandler(
124126
scopeDom.removeEventListener("touchmove", moveEvent, { passive: false })
125127

126128
dragDom.removeEventListener( "mouseup", upEvent, false)
127-
// dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
128129
dragDom.removeEventListener( "mouseenter", enterDragBlockEvent, false)
129130
dragDom.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
130131
dragDom.removeEventListener("touchend", upEvent, false)
@@ -141,7 +142,6 @@ export function useHandler(
141142
scopeDom.addEventListener("touchmove", moveEvent, { passive: false })
142143

143144
dragDom.addEventListener( "mouseup", upEvent, false)
144-
// dragBarRef.value.addEventListener( "mouseout", upEvent, false)
145145
dragDom.addEventListener( "mouseenter", enterDragBlockEvent, false)
146146
dragDom.addEventListener( "mouseleave", leaveDragBlockEvent, false)
147147
dragDom.addEventListener("touchend", upEvent, false)
@@ -151,30 +151,36 @@ export function useHandler(
151151
}
152152

153153
const closeEvent = (e: Event|any) => {
154-
event && event.close && event.close()
155-
resetData()
154+
close()
156155
e.cancelBubble = true
157156
e.preventDefault()
158157
return false
159158
}
160159

161160
const refreshEvent = (e: Event|any) => {
162-
event && event.refresh && event.refresh()
163-
resetData()
161+
refresh()
164162
e.cancelBubble = true
165163
e.preventDefault()
166164
return false
167165
}
168166

167+
const close = () => {
168+
event && event.close && event.close()
169+
resetData()
170+
}
171+
172+
const refresh = () => {
173+
event && event.refresh && event.refresh()
174+
resetData()
175+
}
176+
169177
const resetData = () => {
170178
state.dragLeft = 0
171179
state.thumbAngle = data.angle
172180
}
173181

174182
const clearData = () => {
175-
data.thumb = ''
176-
data.image = ''
177-
data.angle = 0
183+
clearCbs && clearCbs()
178184
resetData()
179185
}
180186

@@ -185,5 +191,7 @@ export function useHandler(
185191
refreshEvent,
186192
resetData,
187193
clearData,
194+
refresh,
195+
close,
188196
}
189197
}

0 commit comments

Comments
 (0)