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

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,

View File

@@ -1,8 +1,7 @@
/**
* @file types Component Snackbar.d.ts
* @description Component Snackbar 类型声明文件
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.3
* @since Beta v0.3.3
*/
declare namespace TGApp.Component.Snackbar {
@@ -16,9 +15,18 @@ declare namespace TGApp.Component.Snackbar {
* @property {boolean} show 是否显示
* @return Params
*/
export interface Params {
interface Params {
text: string;
color?: string;
timeout?: number;
}
/**
* @description Snackbar 方法 - displayBox
* @since Beta v0.3.3
* @function displayBox
* @param {Params} props
* @return void
*/
function displayBox(props: Params): void;
}