mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
✏️ 完善 showConfirm 类型
This commit is contained in:
@@ -4,12 +4,26 @@
|
||||
* @since Beta v0.3.3
|
||||
*/
|
||||
|
||||
import { h, render, type VNode } from "vue";
|
||||
import { h, render } from "vue";
|
||||
import type { ComponentInternalInstance, VNode } from "vue";
|
||||
|
||||
import confirm from "./confirm.vue";
|
||||
|
||||
const confirmId = "tg-func-confirm";
|
||||
|
||||
/**
|
||||
* @description 自定义 confirm 组件
|
||||
* @since Beta v0.3.3
|
||||
* @extends ComponentInternalInstance
|
||||
* @property {Function} exposeProxy.displayBox 显示 confirm
|
||||
* @return ConfirmInstance
|
||||
*/
|
||||
interface ConfirmInstance extends ComponentInternalInstance {
|
||||
exposeProxy: {
|
||||
displayBox: typeof TGApp.Component.Confirm.displayBox;
|
||||
};
|
||||
}
|
||||
|
||||
const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
|
||||
const container = document.createElement("div");
|
||||
container.id = confirmId;
|
||||
@@ -21,14 +35,17 @@ const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
|
||||
|
||||
let confirmInstance: VNode;
|
||||
|
||||
const showConfirm = async (props: TGApp.Component.Confirm.Params): Promise<string | boolean> => {
|
||||
async function showConfirm(props: TGApp.Component.Confirm.ParamsConfirm): Promise<boolean>;
|
||||
async function showConfirm(props: TGApp.Component.Confirm.ParamsInput): Promise<string>;
|
||||
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean>;
|
||||
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean> {
|
||||
if (confirmInstance !== undefined) {
|
||||
const boxVue = confirmInstance.component;
|
||||
return boxVue?.exposeProxy?.displayBox(props);
|
||||
const boxVue = <ConfirmInstance>confirmInstance.component;
|
||||
return boxVue.exposeProxy.displayBox(props);
|
||||
} else {
|
||||
confirmInstance = renderBox(props);
|
||||
return await showConfirm(props);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default showConfirm;
|
||||
|
||||
@@ -34,17 +34,9 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
|
||||
interface ConfirmProps {
|
||||
title: string;
|
||||
text?: string;
|
||||
mode?: "confirm" | "input";
|
||||
otcancel?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ConfirmProps>(), {
|
||||
const props = withDefaults(defineProps<TGApp.Component.Confirm.Params>(), {
|
||||
title: "",
|
||||
text: "",
|
||||
mode: "confirm",
|
||||
|
||||
@@ -370,7 +370,7 @@ async function deleteGacha(): Promise<void> {
|
||||
text: `UID:${uidCur.value},共 ${gachaListCur.value.length} 条数据`,
|
||||
});
|
||||
}
|
||||
if (secondConfirm === false) {
|
||||
if (!secondConfirm) {
|
||||
showSnackbar({
|
||||
color: "grey",
|
||||
text: "已取消祈愿数据删除",
|
||||
|
||||
@@ -353,7 +353,7 @@ async function handleImportOuter(app: string): Promise<void> {
|
||||
title: "是否导入祈愿数据?",
|
||||
text: `来源APP:${app}`,
|
||||
});
|
||||
if (confirm === true) {
|
||||
if (confirm) {
|
||||
// 读取 剪贴板
|
||||
const clipboard = await window.navigator.clipboard.readText();
|
||||
let data: TGApp.Plugins.UIAF.Achievement[];
|
||||
|
||||
52
src/types/Component/Confirm.d.ts
vendored
52
src/types/Component/Confirm.d.ts
vendored
@@ -1,25 +1,65 @@
|
||||
/**
|
||||
* @file types Component Confirm.d.ts
|
||||
* @description Component Confirm 类型声明文件
|
||||
* @author BTMuli <bt-muli@outlook.com>
|
||||
* @since Alpha v0.2.3
|
||||
* @since Beta v0.3.3
|
||||
*/
|
||||
|
||||
declare namespace TGApp.Component.Confirm {
|
||||
/**
|
||||
* @description Confirm 参数
|
||||
* @interface Params
|
||||
* @since Alpha v0.2.3
|
||||
* @interface ParamsBase
|
||||
* @since Beta v0.3.3
|
||||
* @property {string} title 标题
|
||||
* @property {string} text 文本
|
||||
* @property {string} mode 模式 // normal: 正常(默认),input: 输入框
|
||||
* @property {boolean} otcancel 点击外部取消 // true: 取消(默认),false: 不取消
|
||||
* @return Params
|
||||
* @return ParamsBase
|
||||
*/
|
||||
export interface Params {
|
||||
interface ParamsBase {
|
||||
title: string;
|
||||
text?: string;
|
||||
mode?: "confirm" | "input";
|
||||
otcancel?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Confirm 参数- confirm mode
|
||||
* @interface ParamsConfirm
|
||||
* @since Beta v0.3.3
|
||||
* @extends ParamsBase
|
||||
* @property {"confirm"|undefined} mode
|
||||
* @return ParamsConfirm
|
||||
*/
|
||||
interface ParamsConfirm extends ParamsBase {
|
||||
mode?: "confirm";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Confirm 参数 - input mode
|
||||
* @interface ParamsInput
|
||||
* @since Beta v0.3.3
|
||||
* @extends ParamsBase
|
||||
* @property {"input"} mode
|
||||
* @return ParamsInput
|
||||
*/
|
||||
interface ParamsInput extends ParamsBase {
|
||||
mode: "input";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Confirm 参数
|
||||
* @since Beta v0.3.3
|
||||
* @type Params
|
||||
* @return Params
|
||||
*/
|
||||
type Params = ParamsConfirm | ParamsInput;
|
||||
|
||||
/**
|
||||
* @description Confirm 方法 - displayBox
|
||||
* @since Beta v0.3.3
|
||||
* @function displayBox
|
||||
* @param {Params} props
|
||||
* @return string | boolean
|
||||
*/
|
||||
function displayBox(props: Params): boolean | string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user