✏️ 完善其余函数式组件类型

This commit is contained in:
BTMuli
2023-10-13 23:09:08 +08:00
parent 980b420eb1
commit 7dedcc4ea9
4 changed files with 50 additions and 21 deletions

View File

@@ -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 geetest from "./geetest.vue";
const geetestId = "tg-func-geetest";
/**
* @description 自定义 geetest 组件
* @since Beta v0.3.3
* @extends ComponentInternalInstance
* @property {Function} exposeProxy.displayBox 弹出 geetest 验证
* @return GeetestInstance
*/
interface GeetestInstance extends ComponentInternalInstance {
exposeProxy: {
displayBox: () => boolean;
};
}
const renderBox = (): VNode => {
const container = document.createElement("div");
container.id = geetestId;
@@ -21,14 +35,14 @@ const renderBox = (): VNode => {
let geetestInstance: VNode;
const showGeetest = async (): Promise<boolean> => {
async function showGeetest(): Promise<boolean> {
if (geetestInstance !== undefined) {
const boxVue = geetestInstance.component;
return boxVue?.exposeProxy?.displayBox();
const boxVue = <GeetestInstance>geetestInstance.component;
return boxVue.exposeProxy.displayBox();
} else {
geetestInstance = renderBox();
return await showGeetest();
}
};
}
export default showGeetest;

View File

@@ -4,12 +4,26 @@
* @since Beta v0.3.3
*/
import { h, render, type VNode } from "vue";
import type { ComponentInternalInstance, VNode } from "vue";
import { h, render } from "vue";
import snackbar from "./snackbar.vue";
const snackbarId = "tg-func-snackbar";
/**
* @description 自定义 snackbar 组件
* @since Beta v0.3.3
* @extends ComponentInternalInstance
* @property {Function} exposeProxy.displayBox 显示 snackbar
* @return SnackbarInstance
*/
interface SnackbarInstance extends ComponentInternalInstance {
exposeProxy: {
displayBox: typeof TGApp.Component.Snackbar.displayBox;
};
}
const renderBox = (props: TGApp.Component.Snackbar.Params): VNode => {
const container = document.createElement("div");
container.id = snackbarId;
@@ -21,14 +35,14 @@ const renderBox = (props: TGApp.Component.Snackbar.Params): VNode => {
let snackbarInstance: VNode;
const showSnackbar = (props: TGApp.Component.Snackbar.Params): void => {
function showSnackbar(props: TGApp.Component.Snackbar.Params): void {
if (snackbarInstance !== undefined) {
const boxVue = snackbarInstance.component;
boxVue?.exposeProxy?.displayBox(props);
const boxVue = <SnackbarInstance>snackbarInstance.component;
boxVue.exposeProxy.displayBox(props);
} else {
snackbarInstance = renderBox(props);
showSnackbar(props);
}
};
}
export default showSnackbar;

View File

@@ -8,16 +8,9 @@
</transition>
</template>
<script lang="ts" setup>
// vue
import { ref, reactive, onMounted } from "vue";
interface SnackbarProps {
text: string;
color?: string;
timeout?: number;
}
const props = withDefaults(defineProps<SnackbarProps>(), {
const props = withDefaults(defineProps<TGApp.Component.Snackbar.Params>(), {
text: "",
color: "success",
timeout: 1500,