泰州整站优化,购物网站设计的意义,如何做网站经营性备案,家居定制类网站建设运行环境
vue3vitetselement-plus
开发与测试
1. 使用h、render函数创建Dialog
建议可在plugins目录下创建dialog文件夹#xff0c;创建index.ts文件#xff0c;代码如下
import { h, render } from vue;/*** 函数式弹窗* param component 组件* param opti…运行环境
vue3vitetselement-plus
开发与测试
1. 使用h、render函数创建Dialog
建议可在plugins目录下创建dialog文件夹创建index.ts文件代码如下
import { h, render } from vue;/*** 函数式弹窗* param component 组件* param options 组件参数* returns*/
function createDialog(component: any, options: any) {return new Promise((resolve, reject) {// 创建一个div节点const mountNode document.createElement(div);// 将div节点拼接到Dom的body节点下document.body.appendChild(mountNode);// 使用h函数创建节点const vNode h(component, {...options,// 注意: vue子组件emit回调事件名称必须以on开头onSubmit: data {resolve(data);// 移除节点document.body.removeChild(mountNode);},onCancel: data {reject(data);// 移除节点document.body.removeChild(mountNode);}});// 渲染Dialogrender(vNode, mountNode);});
}export default createDialog;2. 全局挂载函数式弹窗
在main.ts中引入弹窗并挂载在app上
// 引入函数式弹窗
import Dialog from /plugins/dialog;const app createApp(App);// 挂载到app
app.config.globalProperties.$dialog Dialog;
3. 测试
3.1 创建一个弹窗组件 testDialog.vue
templateel-dialog v-modeldialogVisible title测试函数式弹窗 width50%span{{ props.content }}/spantemplate #footerspan classdialog-footerel-button clickhandleCancelCancel/el-buttonel-button typeprimary clickhandleSubmit Submit /el-button/span/template/el-dialog
/templatescript langts setup
import { reactive, toRefs } from vue;
// 注意: 需要按需引入使用到的第三方UI组件
import { ElDialog, ElButton } from element-plus;
const props withDefaults(defineProps{show?: boolean; // moadl开关content?: string; // 内容}(),{}
);
const emits defineEmits([submit, cancel]);
const state reactive({dialogVisible: props.show
});
const { dialogVisible } toRefs(state);/** submit */
const handleSubmit () {// 回调emits(submit, { action: submit, msg: submit back });// 关闭弹窗dialogVisible.value false;
};/** cancel */
const handleCancel () {// 回调emits(cancel, { action: cancel, msg: cancel back });// 关闭弹窗dialogVisible.value false;
};
/script3.2 函数式调用弹窗
template!-- 动态函数式弹窗 --div classtest_dialogel-button clickopenModal调用函数式弹窗/el-button/div
/templatescript langts setup
import { getCurrentInstance } from vue;
import TestDialog from ./testDialog.vue;// 通过全局的上下文拿到 proxy 属性
const { proxy } getCurrentInstance();// 调用函数式弹窗
const openModal () {// 调用弹窗proxy.$dialog(TestDialog, {show: true,content: 调用弹窗成功了}).then(res {// submitconsole.log(res);}).catch(error {// cancel 回调console.log(error);});
};
/scriptstyle langscss scoped
.test_dialog {padding: 50px;
}
/style3.3 测试效果 问题 非原生的html元素无法渲染如elements-plus组件无法在弹窗渲染 因为使用h函数无法渲染第三方UI需要在弹窗中单独引入如上面测试代码使用的element-plus的modal和button都需要按需引入一次。如果没有引入弹窗都不会show出来控制台会给于警告如下截图通过这个截图也可以看到h函数是帮我们将弹窗组件拼接到了DOM中组件的参数一并拼接了进去与传统的调用方式近似。 在调用dialog的代码中ts会有代码警告 可以全局申明下挂载的dialog可直接在main.ts添加下面的申明 // 全局申明下$dialog可以去除调用时ts的警告declare module vue {export interface ComponentCustomProperties {$dialog: any;}}
