mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
✏️ 完善其余函数式组件类型
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 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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
14
src/types/Component/Snackbar.d.ts
vendored
14
src/types/Component/Snackbar.d.ts
vendored
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user