Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

♻️ 对 confirm 组件事件划分更为精细

Browse Source
This commit is contained in:
BTMuli
2023-12-29 22:57:23 +08:00
parent a51af0328a
commit 65e3fd2019
2 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/func/confirm.ts
View File

@@ -1,7 +1,7 @@
/** /**
* @file component func confirm.ts * @file component/func/confirm.ts
* @description 封装自定义 confirm 组件，通过函数调用的方式，简化 confirm 的使用 * @description 封装自定义 confirm 组件，通过函数调用的方式，简化 confirm 的使用
* @since Beta v0.3.4 * @since Beta v0.3.9
*/ */
import { h, render } from "vue"; import { h, render } from "vue";
@@ -35,10 +35,24 @@ const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
let confirmInstance: VNode; let confirmInstance: VNode;
async function showConfirm(props: TGApp.Component.Confirm.ParamsConfirm): Promise<boolean>; /**
async function showConfirm(props: TGApp.Component.Confirm.ParamsInput): Promise<string | false>; * @function showConfirm
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean>; * @description 弹出 confirm
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean> { * @param {TGApp.Component.Confirm.Params} props confirm 的参数
* @return {Promise<string | boolean | undefined>} 点击确认返回 true，点击取消返回 false，点击外部返回 undefined
*/
async function showConfirm(
props: TGApp.Component.Confirm.ParamsConfirm,
): Promise<boolean | undefined>;
async function showConfirm(
props: TGApp.Component.Confirm.ParamsInput,
): Promise<string | false | undefined>;
async function showConfirm(
props: TGApp.Component.Confirm.Params,
): Promise<string | boolean | undefined>;
async function showConfirm(
props: TGApp.Component.Confirm.Params,
): Promise<string | boolean | undefined> {
if (confirmInstance !== undefined) { if (confirmInstance !== undefined) {
const boxVue = <ConfirmInstance>confirmInstance.component; const boxVue = <ConfirmInstance>confirmInstance.component;
return await boxVue.exposeProxy.displayBox(props); return await boxVue.exposeProxy.displayBox(props);

41
src/components/func/confirm.vue
View File

@@ -17,12 +17,12 @@
v-model="inputVal" v-model="inputVal"
class="confirm-input-box" class="confirm-input-box"
ref="inputRef" ref="inputRef"
@keydown.enter="handleClick(true)" @keydown.enter="handleConfirm"
/> />
</div> </div>
<div class="confirm-btn-box"> <div class="confirm-btn-box">
<button class="confirm-btn no-btn" @click="handleClick(false)">取消</button> <button class="confirm-btn no-btn" @click="handleCancel">取消</button>
<button class="confirm-btn ok-btn" @click="handleClick(true)">确定</button> <button class="confirm-btn ok-btn" @click="handleConfirm">确定</button>
</div> </div>
</div> </div>
</transition> </transition>
@@ -54,7 +54,7 @@ const data = reactive<TGApp.Component.Confirm.Params>({
const show = ref<boolean>(false); const show = ref<boolean>(false);
const showOuter = ref<boolean>(false); const showOuter = ref<boolean>(false);
const showInner = ref<boolean>(false); const showInner = ref<boolean>(false);
const confirmVal = ref<boolean | string>(false); const confirmVal = ref<boolean | string | undefined>();
const inputVal = ref<string>(""); const inputVal = ref<string>("");
const inputRef = ref<HTMLInputElement>(); const inputRef = ref<HTMLInputElement>();
@@ -78,14 +78,16 @@ onMounted(async () => {
await displayBox(props); await displayBox(props);
}); });
async function displayBox(params: TGApp.Component.Confirm.Params): Promise<string | boolean> { async function displayBox(
params: TGApp.Component.Confirm.Params,
): Promise<string | boolean | undefined> {
data.title = params.title; data.title = params.title;
data.text = params.text ?? ""; data.text = params.text ?? "";
data.mode = params.mode ?? "confirm"; data.mode = params.mode ?? "confirm";
data.otcancel = params.otcancel ?? true; data.otcancel = params.otcancel ?? true;
show.value = true; show.value = true;
// 等待确认框关闭，返回关闭后的confirmVal // 等待确认框关闭，返回关闭后的confirmVal
return await new Promise<string | boolean>((resolve) => { return await new Promise<string | boolean | undefined>((resolve) => {
nextTick(() => { nextTick(() => {
if (data.mode === "input") { if (data.mode === "input") {
// 等待确认框打开，聚焦输入框 // 等待确认框打开，聚焦输入框
@@ -103,27 +105,28 @@ async function displayBox(params: TGApp.Component.Confirm.Params): Promise<strin
}); });
} }
// 点击确认事件 // 确认
function handleClick(status: boolean): void { function handleConfirm(): void {
let res; if (data.mode === "input") {
if (!status) { confirmVal.value = inputVal.value;
res = false; inputVal.value = "";
} else { } else {
if (data.mode === "input") { confirmVal.value = true;
res = inputVal.value;
inputVal.value = "";
} else {
res = true;
}
} }
show.value = false; show.value = false;
confirmVal.value = res; }
// 取消
function handleCancel(): void {
confirmVal.value = false;
show.value = false;
} }
// 点击外部事件 // 点击外部事件
function handleOuter(): void { function handleOuter(): void {
if (data.otcancel) { if (data.otcancel) {
handleClick(false); confirmVal.value = undefined;
show.value = false;
} }
} }