yuang-framework-ui-pc 1.1.151 → 1.1.153
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/es/yu-framework-image-captcha-input/index.d.ts +35 -3
- package/es/yu-framework-image-captcha-input/index.js +16 -6
- package/es/yu-framework-image-captcha-input/style/index.scss +8 -2
- package/es/yu-framework-short-message-captcha-input/index.d.ts +5 -3
- package/es/yu-framework-short-message-captcha-input/index.js +37 -30
- package/es/yu-framework-short-message-captcha-input/style/index.js +1 -0
- package/es/yu-framework-short-message-captcha-input/style/index.scss +7 -13
- package/lib/yu-framework-image-captcha-input/index.cjs +15 -5
- package/lib/yu-framework-image-captcha-input/index.d.ts +35 -3
- package/lib/yu-framework-image-captcha-input/style/index.scss +8 -2
- package/lib/yu-framework-short-message-captcha-input/index.cjs +37 -30
- package/lib/yu-framework-short-message-captcha-input/index.d.ts +5 -3
- package/lib/yu-framework-short-message-captcha-input/style/index.cjs +1 -0
- package/lib/yu-framework-short-message-captcha-input/style/index.scss +7 -13
- package/package.json +1 -1
|
@@ -1,12 +1,44 @@
|
|
|
1
|
-
declare const _default: import('vue').DefineComponent<{
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
modelValue: String;
|
|
3
|
+
param?: Object;
|
|
4
|
+
}>, {
|
|
5
|
+
modelValue: string;
|
|
6
|
+
param: {};
|
|
7
|
+
}>>, {
|
|
2
8
|
changeImageCaptcha: () => void;
|
|
3
9
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
4
10
|
"update:modelValue": (...args: any[]) => void;
|
|
5
11
|
initSuccess: (...args: any[]) => void;
|
|
6
12
|
change: (...args: any[]) => void;
|
|
7
|
-
}, string, import('vue').PublicProps, Readonly<
|
|
13
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
14
|
+
modelValue: String;
|
|
15
|
+
param?: Object;
|
|
16
|
+
}>, {
|
|
17
|
+
modelValue: string;
|
|
18
|
+
param: {};
|
|
19
|
+
}>>> & Readonly<{
|
|
8
20
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
9
21
|
onInitSuccess?: ((...args: any[]) => any) | undefined;
|
|
10
22
|
onChange?: ((...args: any[]) => any) | undefined;
|
|
11
|
-
}>, {
|
|
23
|
+
}>, {
|
|
24
|
+
param: Object;
|
|
25
|
+
modelValue: String;
|
|
26
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
12
27
|
export default _default;
|
|
28
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
29
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
30
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
31
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
32
|
+
} : {
|
|
33
|
+
type: import('vue').PropType<T[K]>;
|
|
34
|
+
required: true;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
type __VLS_WithDefaults<P, D> = {
|
|
38
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
39
|
+
default: D[K];
|
|
40
|
+
}> : P[K];
|
|
41
|
+
};
|
|
42
|
+
type __VLS_Prettify<T> = {
|
|
43
|
+
[K in keyof T]: T[K];
|
|
44
|
+
} & {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, createCommentVNode } from "vue";
|
|
1
|
+
import { defineComponent, computed, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, normalizeClass, createCommentVNode } from "vue";
|
|
2
2
|
import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
|
|
3
3
|
import CaptchaIcon from "./components/CaptchaIcon";
|
|
4
4
|
const _hoisted_1 = { class: "yu-framework-image-captcha-wrapper" };
|
|
@@ -6,9 +6,19 @@ const _hoisted_2 = ["src"];
|
|
|
6
6
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
7
|
...{ name: "YuFrameworkImageCaptchaInput" },
|
|
8
8
|
__name: "index",
|
|
9
|
+
props: {
|
|
10
|
+
modelValue: { default: "" },
|
|
11
|
+
param: { default: {} }
|
|
12
|
+
},
|
|
9
13
|
emits: ["update:modelValue", "initSuccess", "change"],
|
|
10
14
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
15
|
+
const props = __props;
|
|
11
16
|
const emit = __emit;
|
|
17
|
+
const componentParam = computed(() => ({
|
|
18
|
+
inputSize: "medium",
|
|
19
|
+
isShowIcon: true,
|
|
20
|
+
...props.param
|
|
21
|
+
}));
|
|
12
22
|
const imageCaptchaSrc = ref("");
|
|
13
23
|
const imageCaptchaForm = ref({
|
|
14
24
|
key: "",
|
|
@@ -48,20 +58,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
48
58
|
ref: "captchaRef",
|
|
49
59
|
modelValue: imageCaptchaForm.value.captcha,
|
|
50
60
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => imageCaptchaForm.value.captcha = $event),
|
|
51
|
-
size:
|
|
61
|
+
size: componentParam.value.inputSize,
|
|
52
62
|
placeholder: "请输入验证码",
|
|
53
|
-
"prefix-icon": CaptchaIcon,
|
|
63
|
+
"prefix-icon": componentParam.value.isShowIcon ? CaptchaIcon : "",
|
|
54
64
|
clearable: ""
|
|
55
|
-
}, null, 8, ["modelValue"]),
|
|
65
|
+
}, null, 8, ["modelValue", "size", "prefix-icon"]),
|
|
56
66
|
createElementVNode("div", {
|
|
57
|
-
class:
|
|
67
|
+
class: normalizeClass(`image-captcha-${componentParam.value.inputSize}`),
|
|
58
68
|
onClick: changeImageCaptcha
|
|
59
69
|
}, [
|
|
60
70
|
imageCaptchaSrc.value ? (openBlock(), createElementBlock("img", {
|
|
61
71
|
key: 0,
|
|
62
72
|
src: imageCaptchaSrc.value
|
|
63
73
|
}, null, 8, _hoisted_2)) : createCommentVNode("", true)
|
|
64
|
-
])
|
|
74
|
+
], 2)
|
|
65
75
|
]);
|
|
66
76
|
};
|
|
67
77
|
}
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
border-bottom-right-radius: 0px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.image-captcha {
|
|
18
|
+
.image-captcha-large, .image-captcha-medium {
|
|
19
19
|
flex-shrink: 0;
|
|
20
20
|
width: 108px;
|
|
21
|
-
|
|
21
|
+
|
|
22
22
|
/*margin-left: 8px;*/
|
|
23
23
|
border-radius: var(--el-border-radius-base);
|
|
24
24
|
border: 1px solid var(--el-border-color);
|
|
@@ -44,4 +44,10 @@
|
|
|
44
44
|
border-color: var(--el-color-primary);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
+
.image-captcha-large{
|
|
48
|
+
height: 40px;
|
|
49
|
+
}
|
|
50
|
+
.image-captcha-medium {
|
|
51
|
+
height: 32px;
|
|
52
|
+
}
|
|
47
53
|
}
|
|
@@ -4,10 +4,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
4
4
|
}>, {
|
|
5
5
|
modelValue: string;
|
|
6
6
|
param: {};
|
|
7
|
-
}>>, {
|
|
7
|
+
}>>, {
|
|
8
|
+
changeShortMessageCaptcha: () => void;
|
|
9
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
10
|
+
change: (...args: any[]) => void;
|
|
8
11
|
"update:modelValue": (...args: any[]) => void;
|
|
9
12
|
initSuccess: (...args: any[]) => void;
|
|
10
|
-
change: (...args: any[]) => void;
|
|
11
13
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
12
14
|
modelValue: String;
|
|
13
15
|
param?: Object;
|
|
@@ -15,9 +17,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
15
17
|
modelValue: string;
|
|
16
18
|
param: {};
|
|
17
19
|
}>>> & Readonly<{
|
|
20
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
18
21
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
19
22
|
onInitSuccess?: ((...args: any[]) => any) | undefined;
|
|
20
|
-
onChange?: ((...args: any[]) => any) | undefined;
|
|
21
23
|
}>, {
|
|
22
24
|
param: Object;
|
|
23
25
|
modelValue: String;
|
|
@@ -2,6 +2,7 @@ import { defineComponent, computed, ref, onMounted, watch, resolveComponent, cre
|
|
|
2
2
|
import { ElMessage } from "element-plus";
|
|
3
3
|
import CaptchaIcon from "./components/CaptchaIcon";
|
|
4
4
|
import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
|
|
5
|
+
import EleDialog from "../ele-dialog/index";
|
|
5
6
|
const _hoisted_1 = { class: "captcha-container" };
|
|
6
7
|
const _hoisted_2 = { class: "captcha-card" };
|
|
7
8
|
const _hoisted_3 = ["src"];
|
|
@@ -13,21 +14,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
13
14
|
param: { default: {} }
|
|
14
15
|
},
|
|
15
16
|
emits: ["update:modelValue", "initSuccess", "change"],
|
|
16
|
-
setup(__props, { emit: __emit }) {
|
|
17
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
17
18
|
const props = __props;
|
|
18
19
|
const emit = __emit;
|
|
19
20
|
const componentParam = computed(() => ({
|
|
20
|
-
|
|
21
|
-
inputSize: "large",
|
|
21
|
+
inputSize: "medium",
|
|
22
22
|
isShowIcon: true,
|
|
23
|
-
isShowInput: true,
|
|
24
23
|
...props.param
|
|
25
24
|
}));
|
|
26
25
|
const captchaRules = ref([{ required: true, message: "请输入验证码" }]);
|
|
27
26
|
const isShowCaptcha = ref(false);
|
|
28
|
-
const
|
|
27
|
+
const imageCaptchaSrc = ref("");
|
|
29
28
|
const captchaTimes = ref(0);
|
|
30
|
-
const
|
|
29
|
+
const captchaInput = ref("");
|
|
31
30
|
const imageCaptchaForm = ref({
|
|
32
31
|
key: "",
|
|
33
32
|
captcha: ""
|
|
@@ -35,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
35
34
|
onMounted(() => {
|
|
36
35
|
init();
|
|
37
36
|
});
|
|
38
|
-
watch(
|
|
37
|
+
watch(captchaInput, (val) => {
|
|
39
38
|
emit("update:modelValue", val);
|
|
40
39
|
});
|
|
41
40
|
const init = () => {
|
|
@@ -45,8 +44,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
45
44
|
}
|
|
46
45
|
emit("initSuccess", {});
|
|
47
46
|
};
|
|
48
|
-
const
|
|
49
|
-
|
|
47
|
+
const showImageCaptcha = () => {
|
|
48
|
+
captchaInput.value = "";
|
|
50
49
|
imageCaptchaForm.value.captcha = "";
|
|
51
50
|
const mobile = componentParam.value.mobile;
|
|
52
51
|
if (!mobile) {
|
|
@@ -55,15 +54,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
55
54
|
if (mobile.trim().length !== 11) {
|
|
56
55
|
return ElMessage.error("手机号码格式不正确");
|
|
57
56
|
}
|
|
58
|
-
|
|
57
|
+
changeImageCaptcha();
|
|
59
58
|
isShowCaptcha.value = true;
|
|
60
59
|
};
|
|
61
|
-
const
|
|
60
|
+
const changeImageCaptcha = () => {
|
|
62
61
|
imageCaptchaForm.value.captcha = "";
|
|
63
|
-
|
|
62
|
+
imageCaptchaSrc.value = "";
|
|
64
63
|
http.post("/framework-api/core/framework-captcha/createImageCaptcha").then((res) => {
|
|
65
|
-
imageSrc.value = res.data.data.imageSrc;
|
|
66
64
|
imageCaptchaForm.value.key = res.data.data.key;
|
|
65
|
+
imageCaptchaSrc.value = res.data.data.imageSrc;
|
|
67
66
|
}).catch((ex) => {
|
|
68
67
|
console.error(ex.message);
|
|
69
68
|
});
|
|
@@ -79,6 +78,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
79
78
|
setTimeout(startCaptchaTimes, 1e3);
|
|
80
79
|
}
|
|
81
80
|
};
|
|
81
|
+
const changeShortMessageCaptcha = () => {
|
|
82
|
+
changeImageCaptcha();
|
|
83
|
+
captchaInput.value = "";
|
|
84
|
+
};
|
|
82
85
|
const sendShortMessageCaptcha = () => {
|
|
83
86
|
if (!imageCaptchaForm.value.captcha) {
|
|
84
87
|
return ElMessage.error("请输入图形验证码");
|
|
@@ -94,52 +97,56 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
94
97
|
isShowCaptcha.value = false;
|
|
95
98
|
}).catch((ex) => {
|
|
96
99
|
imageCaptchaForm.value.captcha = "";
|
|
97
|
-
|
|
100
|
+
changeImageCaptcha();
|
|
98
101
|
console.error(ex.message);
|
|
99
102
|
});
|
|
100
103
|
};
|
|
104
|
+
__expose({
|
|
105
|
+
changeShortMessageCaptcha
|
|
106
|
+
});
|
|
101
107
|
return (_ctx, _cache) => {
|
|
102
108
|
const _component_el_input = resolveComponent("el-input");
|
|
103
109
|
const _component_el_button = resolveComponent("el-button");
|
|
104
|
-
const _component_ele_dialog = resolveComponent("ele-dialog");
|
|
105
110
|
return openBlock(), createElementBlock("div", null, [
|
|
106
111
|
createElementVNode("div", {
|
|
107
112
|
class: normalizeClass(`yu-form-item-${componentParam.value.inputSize}-wrapper`)
|
|
108
113
|
}, [
|
|
109
114
|
createVNode(_component_el_input, {
|
|
110
115
|
name: "验证码",
|
|
111
|
-
|
|
112
|
-
modelValue:
|
|
113
|
-
|
|
116
|
+
modelValue: captchaInput.value,
|
|
117
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => captchaInput.value = $event),
|
|
118
|
+
size: componentParam.value.inputSize,
|
|
114
119
|
"prefix-icon": componentParam.value.isShowIcon ? CaptchaIcon : "",
|
|
115
120
|
rules: captchaRules.value,
|
|
121
|
+
placeholder: "请输入验证码",
|
|
116
122
|
autocomplete: "off"
|
|
117
|
-
}, null, 8, ["modelValue", "prefix-icon", "rules"]),
|
|
123
|
+
}, null, 8, ["modelValue", "size", "prefix-icon", "rules"]),
|
|
118
124
|
captchaTimes.value === 0 ? (openBlock(), createBlock(_component_el_button, {
|
|
125
|
+
key: 0,
|
|
119
126
|
type: "primary",
|
|
120
|
-
|
|
127
|
+
size: componentParam.value.inputSize,
|
|
121
128
|
class: normalizeClass(`show-captcha-${componentParam.value.inputSize}`),
|
|
122
|
-
onClick:
|
|
129
|
+
onClick: showImageCaptcha
|
|
123
130
|
}, {
|
|
124
131
|
default: withCtx(() => _cache[4] || (_cache[4] = [
|
|
125
132
|
createTextVNode(" 发送验证码 ")
|
|
126
133
|
])),
|
|
127
134
|
_: 1,
|
|
128
135
|
__: [4]
|
|
129
|
-
}, 8, ["class"])) : (openBlock(), createBlock(_component_el_button, {
|
|
136
|
+
}, 8, ["size", "class"])) : (openBlock(), createBlock(_component_el_button, {
|
|
137
|
+
key: 1,
|
|
130
138
|
type: "primary",
|
|
131
|
-
size:
|
|
139
|
+
size: componentParam.value.inputSize,
|
|
132
140
|
disabled: "",
|
|
133
|
-
key: "forbidden-click",
|
|
134
141
|
class: normalizeClass(`show-captcha-times-${componentParam.value.inputSize}`)
|
|
135
142
|
}, {
|
|
136
143
|
default: withCtx(() => [
|
|
137
144
|
createTextVNode(toDisplayString(captchaTimes.value) + "秒后再次发送 ", 1)
|
|
138
145
|
]),
|
|
139
146
|
_: 1
|
|
140
|
-
}, 8, ["class"]))
|
|
147
|
+
}, 8, ["size", "class"]))
|
|
141
148
|
], 2),
|
|
142
|
-
createVNode(
|
|
149
|
+
createVNode(EleDialog, {
|
|
143
150
|
modelValue: isShowCaptcha.value,
|
|
144
151
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isShowCaptcha.value = $event),
|
|
145
152
|
title: "发送验证码",
|
|
@@ -170,12 +177,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
170
177
|
createElementVNode("div", _hoisted_1, [
|
|
171
178
|
createElementVNode("div", _hoisted_2, [
|
|
172
179
|
withDirectives(createElementVNode("img", {
|
|
173
|
-
src:
|
|
174
|
-
onClick:
|
|
180
|
+
src: imageCaptchaSrc.value,
|
|
181
|
+
onClick: changeImageCaptcha,
|
|
175
182
|
class: "captcha-image",
|
|
176
183
|
alt: "验证码加载中"
|
|
177
184
|
}, null, 8, _hoisted_3), [
|
|
178
|
-
[vShow,
|
|
185
|
+
[vShow, imageCaptchaSrc.value]
|
|
179
186
|
])
|
|
180
187
|
]),
|
|
181
188
|
createVNode(_component_el_input, {
|
|
@@ -186,7 +193,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
186
193
|
clearable: "",
|
|
187
194
|
placeholder: "请输入图形验证码",
|
|
188
195
|
required: "",
|
|
189
|
-
onKeyup: withKeys(
|
|
196
|
+
onKeyup: withKeys(changeImageCaptcha, ["enter"])
|
|
190
197
|
}, null, 8, ["modelValue"])
|
|
191
198
|
])
|
|
192
199
|
]),
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.show-captcha-large {
|
|
11
|
-
height: 32px;
|
|
12
|
-
line-height: 0px;
|
|
11
|
+
//height: 32px;
|
|
12
|
+
//line-height: 0px;
|
|
13
13
|
width: 140px;
|
|
14
14
|
margin-right: 3px;
|
|
15
15
|
text-align: center;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.show-captcha-times-large {
|
|
22
|
-
height: 32px;
|
|
22
|
+
//height: 32px;
|
|
23
23
|
width: 140px;
|
|
24
24
|
margin-right: 3px;
|
|
25
25
|
text-align: center;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.show-captcha-medium {
|
|
31
|
-
height: 30px;
|
|
31
|
+
//height: 30px;
|
|
32
32
|
width: 140px;
|
|
33
33
|
margin-right: 2px;
|
|
34
34
|
text-align: center;
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.show-captcha-times-medium {
|
|
41
|
-
height: 30px;
|
|
42
|
-
width: 140px;
|
|
41
|
+
//height: 30px;
|
|
42
|
+
//width: 140px;
|
|
43
43
|
margin-right: 3px;
|
|
44
44
|
text-align: center;
|
|
45
45
|
cursor: pointer;
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
margin-left: 4px;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
.yu-form-item-large-wrapper {
|
|
82
|
+
.yu-form-item-large-wrapper, .yu-form-item-medium-wrapper {
|
|
83
83
|
display: flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
|
|
@@ -96,9 +96,3 @@
|
|
|
96
96
|
border-bottom-left-radius: 0px;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
-
|
|
100
|
-
.yu-form-item-medium-wrapper {
|
|
101
|
-
.el-input__inner {
|
|
102
|
-
border: 0px;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
@@ -7,9 +7,19 @@ const _hoisted_2 = ["src"];
|
|
|
7
7
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
8
8
|
...{ name: "YuFrameworkImageCaptchaInput" },
|
|
9
9
|
__name: "index",
|
|
10
|
+
props: {
|
|
11
|
+
modelValue: { default: "" },
|
|
12
|
+
param: { default: {} }
|
|
13
|
+
},
|
|
10
14
|
emits: ["update:modelValue", "initSuccess", "change"],
|
|
11
15
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
16
|
+
const props = __props;
|
|
12
17
|
const emit = __emit;
|
|
18
|
+
const componentParam = vue.computed(() => ({
|
|
19
|
+
inputSize: "medium",
|
|
20
|
+
isShowIcon: true,
|
|
21
|
+
...props.param
|
|
22
|
+
}));
|
|
13
23
|
const imageCaptchaSrc = vue.ref("");
|
|
14
24
|
const imageCaptchaForm = vue.ref({
|
|
15
25
|
key: "",
|
|
@@ -49,20 +59,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
49
59
|
ref: "captchaRef",
|
|
50
60
|
modelValue: imageCaptchaForm.value.captcha,
|
|
51
61
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => imageCaptchaForm.value.captcha = $event),
|
|
52
|
-
size:
|
|
62
|
+
size: componentParam.value.inputSize,
|
|
53
63
|
placeholder: "请输入验证码",
|
|
54
|
-
"prefix-icon": CaptchaIcon,
|
|
64
|
+
"prefix-icon": componentParam.value.isShowIcon ? CaptchaIcon : "",
|
|
55
65
|
clearable: ""
|
|
56
|
-
}, null, 8, ["modelValue"]),
|
|
66
|
+
}, null, 8, ["modelValue", "size", "prefix-icon"]),
|
|
57
67
|
vue.createElementVNode("div", {
|
|
58
|
-
class:
|
|
68
|
+
class: vue.normalizeClass(`image-captcha-${componentParam.value.inputSize}`),
|
|
59
69
|
onClick: changeImageCaptcha
|
|
60
70
|
}, [
|
|
61
71
|
imageCaptchaSrc.value ? (vue.openBlock(), vue.createElementBlock("img", {
|
|
62
72
|
key: 0,
|
|
63
73
|
src: imageCaptchaSrc.value
|
|
64
74
|
}, null, 8, _hoisted_2)) : vue.createCommentVNode("", true)
|
|
65
|
-
])
|
|
75
|
+
], 2)
|
|
66
76
|
]);
|
|
67
77
|
};
|
|
68
78
|
}
|
|
@@ -1,12 +1,44 @@
|
|
|
1
|
-
declare const _default: import('vue').DefineComponent<{
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
modelValue: String;
|
|
3
|
+
param?: Object;
|
|
4
|
+
}>, {
|
|
5
|
+
modelValue: string;
|
|
6
|
+
param: {};
|
|
7
|
+
}>>, {
|
|
2
8
|
changeImageCaptcha: () => void;
|
|
3
9
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
4
10
|
"update:modelValue": (...args: any[]) => void;
|
|
5
11
|
initSuccess: (...args: any[]) => void;
|
|
6
12
|
change: (...args: any[]) => void;
|
|
7
|
-
}, string, import('vue').PublicProps, Readonly<
|
|
13
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
14
|
+
modelValue: String;
|
|
15
|
+
param?: Object;
|
|
16
|
+
}>, {
|
|
17
|
+
modelValue: string;
|
|
18
|
+
param: {};
|
|
19
|
+
}>>> & Readonly<{
|
|
8
20
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
9
21
|
onInitSuccess?: ((...args: any[]) => any) | undefined;
|
|
10
22
|
onChange?: ((...args: any[]) => any) | undefined;
|
|
11
|
-
}>, {
|
|
23
|
+
}>, {
|
|
24
|
+
param: Object;
|
|
25
|
+
modelValue: String;
|
|
26
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
12
27
|
export default _default;
|
|
28
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
29
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
30
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
31
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
32
|
+
} : {
|
|
33
|
+
type: import('vue').PropType<T[K]>;
|
|
34
|
+
required: true;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
type __VLS_WithDefaults<P, D> = {
|
|
38
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
39
|
+
default: D[K];
|
|
40
|
+
}> : P[K];
|
|
41
|
+
};
|
|
42
|
+
type __VLS_Prettify<T> = {
|
|
43
|
+
[K in keyof T]: T[K];
|
|
44
|
+
} & {};
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
border-bottom-right-radius: 0px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.image-captcha {
|
|
18
|
+
.image-captcha-large, .image-captcha-medium {
|
|
19
19
|
flex-shrink: 0;
|
|
20
20
|
width: 108px;
|
|
21
|
-
|
|
21
|
+
|
|
22
22
|
/*margin-left: 8px;*/
|
|
23
23
|
border-radius: var(--el-border-radius-base);
|
|
24
24
|
border: 1px solid var(--el-border-color);
|
|
@@ -44,4 +44,10 @@
|
|
|
44
44
|
border-color: var(--el-color-primary);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
+
.image-captcha-large{
|
|
48
|
+
height: 40px;
|
|
49
|
+
}
|
|
50
|
+
.image-captcha-medium {
|
|
51
|
+
height: 32px;
|
|
52
|
+
}
|
|
47
53
|
}
|
|
@@ -3,6 +3,7 @@ const vue = require("vue");
|
|
|
3
3
|
const elementPlus = require("element-plus");
|
|
4
4
|
const CaptchaIcon = require("./components/CaptchaIcon");
|
|
5
5
|
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
|
|
6
|
+
const EleDialog = require("../ele-dialog/index");
|
|
6
7
|
const _hoisted_1 = { class: "captcha-container" };
|
|
7
8
|
const _hoisted_2 = { class: "captcha-card" };
|
|
8
9
|
const _hoisted_3 = ["src"];
|
|
@@ -14,21 +15,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
14
15
|
param: { default: {} }
|
|
15
16
|
},
|
|
16
17
|
emits: ["update:modelValue", "initSuccess", "change"],
|
|
17
|
-
setup(__props, { emit: __emit }) {
|
|
18
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
18
19
|
const props = __props;
|
|
19
20
|
const emit = __emit;
|
|
20
21
|
const componentParam = vue.computed(() => ({
|
|
21
|
-
|
|
22
|
-
inputSize: "large",
|
|
22
|
+
inputSize: "medium",
|
|
23
23
|
isShowIcon: true,
|
|
24
|
-
isShowInput: true,
|
|
25
24
|
...props.param
|
|
26
25
|
}));
|
|
27
26
|
const captchaRules = vue.ref([{ required: true, message: "请输入验证码" }]);
|
|
28
27
|
const isShowCaptcha = vue.ref(false);
|
|
29
|
-
const
|
|
28
|
+
const imageCaptchaSrc = vue.ref("");
|
|
30
29
|
const captchaTimes = vue.ref(0);
|
|
31
|
-
const
|
|
30
|
+
const captchaInput = vue.ref("");
|
|
32
31
|
const imageCaptchaForm = vue.ref({
|
|
33
32
|
key: "",
|
|
34
33
|
captcha: ""
|
|
@@ -36,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
36
35
|
vue.onMounted(() => {
|
|
37
36
|
init();
|
|
38
37
|
});
|
|
39
|
-
vue.watch(
|
|
38
|
+
vue.watch(captchaInput, (val) => {
|
|
40
39
|
emit("update:modelValue", val);
|
|
41
40
|
});
|
|
42
41
|
const init = () => {
|
|
@@ -46,8 +45,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
46
45
|
}
|
|
47
46
|
emit("initSuccess", {});
|
|
48
47
|
};
|
|
49
|
-
const
|
|
50
|
-
|
|
48
|
+
const showImageCaptcha = () => {
|
|
49
|
+
captchaInput.value = "";
|
|
51
50
|
imageCaptchaForm.value.captcha = "";
|
|
52
51
|
const mobile = componentParam.value.mobile;
|
|
53
52
|
if (!mobile) {
|
|
@@ -56,15 +55,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
56
55
|
if (mobile.trim().length !== 11) {
|
|
57
56
|
return elementPlus.ElMessage.error("手机号码格式不正确");
|
|
58
57
|
}
|
|
59
|
-
|
|
58
|
+
changeImageCaptcha();
|
|
60
59
|
isShowCaptcha.value = true;
|
|
61
60
|
};
|
|
62
|
-
const
|
|
61
|
+
const changeImageCaptcha = () => {
|
|
63
62
|
imageCaptchaForm.value.captcha = "";
|
|
64
|
-
|
|
63
|
+
imageCaptchaSrc.value = "";
|
|
65
64
|
httpConfig.http.post("/framework-api/core/framework-captcha/createImageCaptcha").then((res) => {
|
|
66
|
-
imageSrc.value = res.data.data.imageSrc;
|
|
67
65
|
imageCaptchaForm.value.key = res.data.data.key;
|
|
66
|
+
imageCaptchaSrc.value = res.data.data.imageSrc;
|
|
68
67
|
}).catch((ex) => {
|
|
69
68
|
console.error(ex.message);
|
|
70
69
|
});
|
|
@@ -80,6 +79,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
80
79
|
setTimeout(startCaptchaTimes, 1e3);
|
|
81
80
|
}
|
|
82
81
|
};
|
|
82
|
+
const changeShortMessageCaptcha = () => {
|
|
83
|
+
changeImageCaptcha();
|
|
84
|
+
captchaInput.value = "";
|
|
85
|
+
};
|
|
83
86
|
const sendShortMessageCaptcha = () => {
|
|
84
87
|
if (!imageCaptchaForm.value.captcha) {
|
|
85
88
|
return elementPlus.ElMessage.error("请输入图形验证码");
|
|
@@ -95,52 +98,56 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
95
98
|
isShowCaptcha.value = false;
|
|
96
99
|
}).catch((ex) => {
|
|
97
100
|
imageCaptchaForm.value.captcha = "";
|
|
98
|
-
|
|
101
|
+
changeImageCaptcha();
|
|
99
102
|
console.error(ex.message);
|
|
100
103
|
});
|
|
101
104
|
};
|
|
105
|
+
__expose({
|
|
106
|
+
changeShortMessageCaptcha
|
|
107
|
+
});
|
|
102
108
|
return (_ctx, _cache) => {
|
|
103
109
|
const _component_el_input = vue.resolveComponent("el-input");
|
|
104
110
|
const _component_el_button = vue.resolveComponent("el-button");
|
|
105
|
-
const _component_ele_dialog = vue.resolveComponent("ele-dialog");
|
|
106
111
|
return vue.openBlock(), vue.createElementBlock("div", null, [
|
|
107
112
|
vue.createElementVNode("div", {
|
|
108
113
|
class: vue.normalizeClass(`yu-form-item-${componentParam.value.inputSize}-wrapper`)
|
|
109
114
|
}, [
|
|
110
115
|
vue.createVNode(_component_el_input, {
|
|
111
116
|
name: "验证码",
|
|
112
|
-
|
|
113
|
-
modelValue:
|
|
114
|
-
|
|
117
|
+
modelValue: captchaInput.value,
|
|
118
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => captchaInput.value = $event),
|
|
119
|
+
size: componentParam.value.inputSize,
|
|
115
120
|
"prefix-icon": componentParam.value.isShowIcon ? CaptchaIcon : "",
|
|
116
121
|
rules: captchaRules.value,
|
|
122
|
+
placeholder: "请输入验证码",
|
|
117
123
|
autocomplete: "off"
|
|
118
|
-
}, null, 8, ["modelValue", "prefix-icon", "rules"]),
|
|
124
|
+
}, null, 8, ["modelValue", "size", "prefix-icon", "rules"]),
|
|
119
125
|
captchaTimes.value === 0 ? (vue.openBlock(), vue.createBlock(_component_el_button, {
|
|
126
|
+
key: 0,
|
|
120
127
|
type: "primary",
|
|
121
|
-
|
|
128
|
+
size: componentParam.value.inputSize,
|
|
122
129
|
class: vue.normalizeClass(`show-captcha-${componentParam.value.inputSize}`),
|
|
123
|
-
onClick:
|
|
130
|
+
onClick: showImageCaptcha
|
|
124
131
|
}, {
|
|
125
132
|
default: vue.withCtx(() => _cache[4] || (_cache[4] = [
|
|
126
133
|
vue.createTextVNode(" 发送验证码 ")
|
|
127
134
|
])),
|
|
128
135
|
_: 1,
|
|
129
136
|
__: [4]
|
|
130
|
-
}, 8, ["class"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
|
|
137
|
+
}, 8, ["size", "class"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
|
|
138
|
+
key: 1,
|
|
131
139
|
type: "primary",
|
|
132
|
-
size:
|
|
140
|
+
size: componentParam.value.inputSize,
|
|
133
141
|
disabled: "",
|
|
134
|
-
key: "forbidden-click",
|
|
135
142
|
class: vue.normalizeClass(`show-captcha-times-${componentParam.value.inputSize}`)
|
|
136
143
|
}, {
|
|
137
144
|
default: vue.withCtx(() => [
|
|
138
145
|
vue.createTextVNode(vue.toDisplayString(captchaTimes.value) + "秒后再次发送 ", 1)
|
|
139
146
|
]),
|
|
140
147
|
_: 1
|
|
141
|
-
}, 8, ["class"]))
|
|
148
|
+
}, 8, ["size", "class"]))
|
|
142
149
|
], 2),
|
|
143
|
-
vue.createVNode(
|
|
150
|
+
vue.createVNode(EleDialog, {
|
|
144
151
|
modelValue: isShowCaptcha.value,
|
|
145
152
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isShowCaptcha.value = $event),
|
|
146
153
|
title: "发送验证码",
|
|
@@ -171,12 +178,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
171
178
|
vue.createElementVNode("div", _hoisted_1, [
|
|
172
179
|
vue.createElementVNode("div", _hoisted_2, [
|
|
173
180
|
vue.withDirectives(vue.createElementVNode("img", {
|
|
174
|
-
src:
|
|
175
|
-
onClick:
|
|
181
|
+
src: imageCaptchaSrc.value,
|
|
182
|
+
onClick: changeImageCaptcha,
|
|
176
183
|
class: "captcha-image",
|
|
177
184
|
alt: "验证码加载中"
|
|
178
185
|
}, null, 8, _hoisted_3), [
|
|
179
|
-
[vue.vShow,
|
|
186
|
+
[vue.vShow, imageCaptchaSrc.value]
|
|
180
187
|
])
|
|
181
188
|
]),
|
|
182
189
|
vue.createVNode(_component_el_input, {
|
|
@@ -187,7 +194,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
187
194
|
clearable: "",
|
|
188
195
|
placeholder: "请输入图形验证码",
|
|
189
196
|
required: "",
|
|
190
|
-
onKeyup: vue.withKeys(
|
|
197
|
+
onKeyup: vue.withKeys(changeImageCaptcha, ["enter"])
|
|
191
198
|
}, null, 8, ["modelValue"])
|
|
192
199
|
])
|
|
193
200
|
]),
|
|
@@ -4,10 +4,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
4
4
|
}>, {
|
|
5
5
|
modelValue: string;
|
|
6
6
|
param: {};
|
|
7
|
-
}>>, {
|
|
7
|
+
}>>, {
|
|
8
|
+
changeShortMessageCaptcha: () => void;
|
|
9
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
10
|
+
change: (...args: any[]) => void;
|
|
8
11
|
"update:modelValue": (...args: any[]) => void;
|
|
9
12
|
initSuccess: (...args: any[]) => void;
|
|
10
|
-
change: (...args: any[]) => void;
|
|
11
13
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
12
14
|
modelValue: String;
|
|
13
15
|
param?: Object;
|
|
@@ -15,9 +17,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
15
17
|
modelValue: string;
|
|
16
18
|
param: {};
|
|
17
19
|
}>>> & Readonly<{
|
|
20
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
18
21
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
19
22
|
onInitSuccess?: ((...args: any[]) => any) | undefined;
|
|
20
|
-
onChange?: ((...args: any[]) => any) | undefined;
|
|
21
23
|
}>, {
|
|
22
24
|
param: Object;
|
|
23
25
|
modelValue: String;
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.show-captcha-large {
|
|
11
|
-
height: 32px;
|
|
12
|
-
line-height: 0px;
|
|
11
|
+
//height: 32px;
|
|
12
|
+
//line-height: 0px;
|
|
13
13
|
width: 140px;
|
|
14
14
|
margin-right: 3px;
|
|
15
15
|
text-align: center;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.show-captcha-times-large {
|
|
22
|
-
height: 32px;
|
|
22
|
+
//height: 32px;
|
|
23
23
|
width: 140px;
|
|
24
24
|
margin-right: 3px;
|
|
25
25
|
text-align: center;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.show-captcha-medium {
|
|
31
|
-
height: 30px;
|
|
31
|
+
//height: 30px;
|
|
32
32
|
width: 140px;
|
|
33
33
|
margin-right: 2px;
|
|
34
34
|
text-align: center;
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.show-captcha-times-medium {
|
|
41
|
-
height: 30px;
|
|
42
|
-
width: 140px;
|
|
41
|
+
//height: 30px;
|
|
42
|
+
//width: 140px;
|
|
43
43
|
margin-right: 3px;
|
|
44
44
|
text-align: center;
|
|
45
45
|
cursor: pointer;
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
margin-left: 4px;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
.yu-form-item-large-wrapper {
|
|
82
|
+
.yu-form-item-large-wrapper, .yu-form-item-medium-wrapper {
|
|
83
83
|
display: flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
|
|
@@ -96,9 +96,3 @@
|
|
|
96
96
|
border-bottom-left-radius: 0px;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
-
|
|
100
|
-
.yu-form-item-medium-wrapper {
|
|
101
|
-
.el-input__inner {
|
|
102
|
-
border: 0px;
|
|
103
|
-
}
|
|
104
|
-
}
|