梅州生态建设有限公司网站,户外网站 整站下载,北京网站搭建设计,产品网站设计理念组件原本是在PC端使用的#xff0c;现在需要把组件再封装一次#xff0c;供app调用#xff0c;但是在app上会显示tag栏#xff0c;有占位影响空间#xff0c;所以需求去掉头部tag#xff0c;只显示下方组件。 实现方法#xff0c;以前是直接引用的组件#xff0c;现在改… 组件原本是在PC端使用的现在需要把组件再封装一次供app调用但是在app上会显示tag栏有占位影响空间所以需求去掉头部tag只显示下方组件。 实现方法以前是直接引用的组件现在改为动态引用组件使用component :is“” /, 挂载后获取tag栏的dom使用display‘none’隐藏然后再动态导入组件。 templatediv classrunmapvisual-pagediv classleft-runmap flex-coldiv classrunmap-wrap flex-1!-- 供app调用的组件 --!-- RunMap refrunMapRef modecheck :propQuerycurRumMapData || {} :noPaddingtrue :noFootertrue:useTypeuseType / --component :isrunMapRef v-ifrunMapRef modecheck :propQuerycurRumMapData || {} :noPaddingtrue :noFootertrue :useTypeuseType //div/div/div
/templatescript langts
import { defineComponent, onMounted, reactive, shallowRef, toRefs, onBeforeUnmount, watch } from vue
// import RunMap from /views/Components/RunMapV2/preview.vue
import { useRoute } from vue-router
export default defineComponent({name: runMapCpns,components: {// RunMap},setup() {const route useRoute();const state reactive({curRumMapData: {} as any, // 当前选中的对象useType: appUse,runMapRef: null,})const methods {}watch(() route, (newRoute) {if (route.path /Components/RunMapV2/RunMapCpns) {state.curRumMapData newRoute.query}}, { immediate: true })onMounted(() {// 隐藏 taglet t document.getElementById(v-tags-view)t.style.display none// 再加载组件import(/views/Components/RunMapV2/preview.vue).then(component {state.runMapRef shallowRef(component.default);})})onBeforeUnmount(() {})return {...toRefs(state),...methods,}}
})
/script
style scoped langless
.runmapvisual-page {width: 100%;height: 100%;display: flex;flex-direction: row;// padding-top: 2px;.left-runmap {width: 0;flex: 1;height: 100%;padding: var(--base-padding);z-index: 1;}
}
/style
