网站备案加速,中国建筑企业排名,安徽建海建设工程有限公司网站,网站结算系统怎么做最初可运行代码
弹窗组件代码#xff1a;
#xff08;后来发现以下代码可运行#xff0c;但打包 typescript 类型检查出错#xff0c;可打包的代码在文末#xff09;
templatediv v-ifisVisible classdialogdiv class
后来发现以下代码可运行但打包 typescript 类型检查出错可打包的代码在文末
templatediv v-ifisVisible classdialogdiv classdialog-contentdiv stylepadding: 40px 40px; text-align: center{{message}}/divdiv styledisplay: flex; border-top: 1px solid #d2d0d0div clickcancel classdialog-button取消/divdiv styleborder-right: 1px solid #d2d0d0/divdiv clickhandleConfirm classdialog-button stylecolor: #4e8fd3确定/div/div/div/div
/templatescript setup langts
import { ref } from vue;const isVisible ref(false);
const message ref();
const confirmCallback ref(null)
const cancelCallback ref(null);const showDialog (params {} ) {isVisible.value true;message.value params.message || 提示内容;confirmCallback.value params.confirmCallback || null;cancelCallback.value params.cancelCallback || null;
};const handleConfirm () {if (confirmCallback.value) {confirmCallback.value();}isVisible.value false;
};const cancel () {if (cancelCallback.value) {cancelCallback.value();}isVisible.value false;
};defineExpose({showDialog
});
/scriptstyle scoped
.dialog {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;font-size: 16px;
}.dialog-content {background-color: #fff;border-radius: 10px;width: 80%;
}.dialog-button {flex-grow: 1;text-align: center;padding: 20px 0;
}
/style效果更适用于移动端 弹窗显示
templatedivbutton clickopenDialog打开弹窗/buttonChildDialg refdialogRef //div
/templatescript setup langts
import { ref } from vue;// 1. 引入子组件
import ChildDialg from /views/components/ChildDialg.vue;// 2. 定义子组件 ref 参数
const dialogRef ref(null);const openDialog () {// 3. 弹窗显示dialogRef.value.showDialog({message: 内容,confirCallback: () {}});
};
/script
打包 typescript 检查错误修复
######## 项目打包typescript 类型检查报错 ###########
1. 函数接收类没有属性定义 2. 调用弹窗时未作 组件 非空判断 3. 接收的回调函数参数定义的初始值为 null 无法以函数方式调用 4. 定义的组件 ref 参数默认值为 null 无法调用子组件暴露的函数 5. 子组件定义的参数 与 父组件传递的参数不一致定义了取消回调但没有传入
可以选择传入“取消”操作的回调函数但考虑到此组件在我实际运用时取消没有其它操作便选择不定义其回调函数 最终可打包的代码
templatediv v-ifisVisible classdialogdiv classdialog-contentdiv stylepadding: 40px 40px; text-align: center{{message}}/divdiv styledisplay: flex; border-top: 1px solid #d2d0d0div clickcancel classdialog-button取消/divdiv styleborder-right: 1px solid #d2d0d0/divdiv clickhandleConfirm classdialog-button stylecolor: #4e8fd3确定/div/div/div/div
/templatescript setup langts
import { ref } from vue;const isVisible ref(false);
const message ref();
const confirmCallback ref(() {})
const cancelCallback ref(() {});const showDialog (params {message: 提示内容,confirmCallback: () {}
} ) {isVisible.value true;message.value params.message;confirmCallback.value params.confirmCallback;
};const handleConfirm () {if (confirmCallback.value) {confirmCallback.value();}isVisible.value false;
};const cancel () {if (cancelCallback.value) {cancelCallback.value();}isVisible.value false;
};defineExpose({showDialog
});
/scriptstyle scoped
.dialog {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;font-size: 16px;
}.dialog-content {background-color: #fff;border-radius: 10px;width: 80%;
}.dialog-button {flex-grow: 1;text-align: center;padding: 20px 0;
}
/styletemplatedivbutton clickopenDialog打开弹窗/buttonChildDialg refdialogRef //div
/templatescript setup langts
import { ref } from vue;// 1. 引入子组件
import ChildDialg from /views/components/ChildDialg.vue;// 2. 定义子组件 ref 参数
const dialogRef refInstanceTypetypeof DialogView | null(null)const openDialog () {// 3. 弹窗显示if(dialogRef.value) {dialogRef.value.showDialog({message: 内容,confirCallback: () {}});}
};
/script
