Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-11 09:08: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 的使用
* @since Beta v0.3.4
* @since Beta v0.3.9
*/
import { h, render } from "vue";
@@ -35,10 +35,24 @@ const renderBox = (props: TGApp.Component.Confirm.Params): 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>;
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean>;
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean> {
/**
* @function showConfirm
* @description 弹出 confirm
* @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) {
const boxVue = <ConfirmInstance>confirmInstance.component;
return await boxVue.exposeProxy.displayBox(props);

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

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