做电影下载网站需要什么软件,做网站代运营如何寻找客户,网站快速排名,网站开发网站建设公司由于uniapp没有开放根节点#xff0c;所以一般情况下通过app.components注册#xff0c;在需要的页面直接写组件标签#xff0c;但是如果每个页面都需要的话#xff0c;再每个都加的话会非常的麻烦
网上的思路都不咋地#xff1a;
1.通过写一个透明弹窗页面来实现#…由于uniapp没有开放根节点所以一般情况下通过app.components注册在需要的页面直接写组件标签但是如果每个页面都需要的话再每个都加的话会非常的麻烦
网上的思路都不咋地
1.通过写一个透明弹窗页面来实现亲测页面透明设置无效。
2.通过编写全局组件每个页面都引入非常不方便。 这里采用vite插件实现这里满足uniappVue3vite 目前小程序测试没有问题
安装插件
npm i yck-web/vite-plugin-template-inset 配置
//修改配置vite.config.js, plugins中添加插件(位置需要放在uni()方法前面)
import uni from dcloudio/vite-plugin-uni;import vitePluginTemplateInset from yck-web/vite-plugin-template-inset;plugins: [vitePluginTemplateInset([GlobalDialog ref\GlobalDialog\/GlobalDialog]),uni(),],
//main.js全局注册import GlobalDialog from /components/GlobalDialogapp.component(GlobalDialog, GlobalDialog)
!-- 弹窗口组件 --
template nameglobalDialogview classmask position-fixed bg-#000 opacity-60% w-100vh h-100vh stylez-index:1 v-ifshowmask/view
/templatescript setup langts
import { ref } from vue;let show ref(false);const open () {show.value true;
};
const close () {show.value false;
};//暴露open和close方法
defineExpose({open,close,
});
/script
style langscss scoped/style
//页面使用
const instance getCurrentInstance()
const showGlobalPop () {instance?.refs?.GlobalDialog?.open();}
