Flex2 z-order问题解决

本文探讨了Flex中容器子控件的Z-Order调整方法,包括使用removeChild和addChild来实现最高层级显示,以及通过setChildIndex交换两个子控件的层级。文章还讨论了swapChildren和swapChildrenAt方法在某些情况下可能遇到的问题及其替代方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在flex2中, 一个容器的子控件相互重叠(如Canvas), 由z-order决定. swapChildren, swapChildrenAt用来交换两个子控件的z-order, 但有时会抛如下异常:

can1.swapChildrenAt(1, 0);
RangeError: Error #2006: The supplied index is out of bounds.

can1.swapChildren(clus1, t1);
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.

我碰到这种异常的典型情况是当子控件Resize到超出Canvas之外时. 不过可以用如下两种方式替代实现控制z-order:

1). Put child1 at the most z-order:
container.removeChild(child1);
container.addChild(child1);
利用了每次添加的child总具有最大的z-order.

2). swap two children child1 and child2:
var i1:int = container.getChildIndex(child1);
var i2:int = container.getChildIndex(child2);
container.setChildIndex(child1, i2);
container.setChildIndex(child2, i1);

具体原因描述可在一个mail list找到: (http://www.mail-archive.com/flexcoders@yahoogroups.com/msg61112.html):
"You say your container is a DisplayObjectContainer. Is it also a Flex Container
such as Canvas or VBox? If so, there is a bug with using swapChildrenAt() and
maybe with swapChildren() as well. Try using removeChildAt() and addChildAt()
instead.
 
A Flex Container does tricky stuff with child indexes and overrides child
management APIs such as numChildren, addChildAt(), removeChildAt(), etc.,
because there are two kinds of children -- content children and non-content
children. If you write
 
<HBox>
    <Button/>
    <Button/>
</HBox>
 
there are only two content children but, if the HBox has a background or
scrollbars, there can be additional non-children children.
 
I think what happened is that the swapChildren() and swapChildrenAt() methods
got added to DisplayObjectContainer in Player 9, and the Flex framework is not
yet supporting them properly in the Container class.
 
- Gordon"

顺便提一下:
1). PopUpManager也可改变重叠状态, 但它是作为弹出窗口, 改变了原先的层次(父子)关系, 所在坐标轴等.
2). debug模式下用trace(string)可在控制台打印调试信息.
3). Canvas有个clipContent可允许子控件显示超出Canvas的范围(http://www.judahfrangipane.com/blog/?p=101).
4). horizontalScrollPolicy="off" verticalScrollPolicy="off"可以去掉滚动条.
5). 没想到又写Flex了... 

<template> <view :style="colorStyle"> <view class="h-120 flex-between-center px-20"> <view class="h-72 bg--w111-f5f5f5 rd-36rpx px-32 flex-1 flex-y-center relative"> <text class="iconfont icon-ic_search text--w111-999"></text> <input type="text" confirm-type="search" placeholder="请输入要查询的内容" @confirm="inputConfirm" @input="setValue" class="fs-28 w-438 text--w111-333 pl-18 line1" v-model="searchValue" /> <text class="iconfont icon-ic_close1 fs-28 text--w111-999 z-10" v-show="searchValue" @tap="clearSearchVal"></text> </view> <view class="fs-28 text--w111-333 ml-32" @tap='searchBut'>搜索</view> </view> <view class="px-20" v-if="history.length"> <view class="flex-between-center mt-16 mb-24"> <view class="fs-28 lh-40rpx fw-500 text--w111-333">历史搜索</view> <text class="iconfont icon-ic_delete fs-28 text--w111-999" @tap="clear"></text> </view> <view class="flex flex-wrap"> <text class="flex-center h-56 line1 rd-28rpx bg--w111-f5f5f5 px-24 fs-24 text--w111-666 mr-24 mb-16" v-for="(item,index) in isShowMore ? history : history.slice(0,7)" :key="index" @tap='setHotSearchValue(item.keyword)' v-if="item.keyword">{{item.keyword}}</text> <view class="w-56 h-56 rd-28rpx bg--w111-f5f5f5 flex-center text--w111-666" v-if="history.length > 7" @tap="isShowMore = !isShowMore"> <text class="iconfont fs-24" :class="isShowMore ? 'icon-ic_uparrow' : 'icon-ic_downarrow'"></text> </view> </view> </view> <view class="px-20"> <view class="flex-between-center mt-40 mb-24"> <view class="fs-28 lh-40rpx fw-500 text--w111-333">热门搜索</view> <text class="iconfont icon-ic_Refresh fs-28 text--w111-999" :class="isSpin ? 'spin' : ''" @tap="refresh"></text> </view> <view class="flex flex-wrap"> <view class="flex-center search_item h-56 rd-28rpx px-24 fs-24 mr-24 mb-16" v-for="(item,index) in hotSearchList" :key="index" :style="{'color':item.color,'background-color':item.bg_color,border: item.border_color ? '1px solid ' + item.border_color : 'none'}" @tap='setHotSearchValue(item.name)'> <view class="flex-y-center"> <image v-if="item.icon" :src="item.icon" class="w-24 h-24 rd-4rpx mr-8"></image> <text>{{item.name}}</text> </view> </view> </view> </view> <view> <scroll-view scroll-x="true" class="white-nowrap vertical-middle w-730 mt-32 pl-20" show-scrollbar="false"> <view class="inline-block mr-20" v-if="salesRecommendList.length"> <view class="w-454 rd-24rpx gradient_bg pt-22 pb-8"> <view class="fs-28 font-red lh-40rpx fw-600 pl-24 mb-18 flex-y-center" @tap="goRank(1)"> <image src="@/static/img/sales_icon.png" class="w-40 h-40"></image> <text class="pl-8">销量</text> </view> <view class="mx-8 rd-24rpx bg--w111-fff h-748 p-20"> <view class="flex-y-center" v-if="salesRecommendList[0]" @tap="goDetail(salesRecommendList[0])"> <view class="relative w-108 h-108"> <image :src="salesRecommendList[0].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count1 fs-24 text--w111-fff flex-center">1</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{salesRecommendList[0].store_name}}</view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{salesRecommendList[0].store_info}}</view> </view> </view> <view class="flex-y-center mt-16" v-if="salesRecommendList[1]" @tap="goDetail(salesRecommendList[1])"> <view class="relative w-108 h-108"> <image :src="salesRecommendList[1].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count2 fs-24 text--w111-fff flex-center">2</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{salesRecommendList[1].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{salesRecommendList[1].store_info}}</view> </view> </view> <view class="flex-y-center mt-16 mb-34" v-if="salesRecommendList[2]" @tap="goDetail(salesRecommendList[2])"> <view class="relative w-108 h-108"> <image :src="salesRecommendList[2].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count3 fs-24 text--w111-fff flex-center">3</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{salesRecommendList[2].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{salesRecommendList[2].store_info}}</view> </view> </view> <view class="flex-between-center scroll_cell" v-for="(item,index) in salesRecommendList.slice(3)" :key="index" @tap="goDetail(item)"> <view class="flex-y-center"> <text class="inline-block w-30 h-32 lh-32rpx text--w111-fff text-center fs-24 rank_4">{{index + 4}}</text> <text class="fs-26 text--w111-333 ml-20 w-360 line1"> <image v-if="item.delivery_type.indexOf('2') > -1" style="height:32.6rpx;width:116.08rpx;margin-right:10rpx;vertical-align:middle;" src="https://www.ytzhan.com/uploads/uniapp/2-glodzt.png"></image> <image v-if="item.delivery_type.indexOf('1') > -1" style="height:32.6rpx;width:116.08rpx;margin-right: 10rpx;vertical-align:middle;" src="https://www.ytzhan.com/uploads/uniapp/2-glodkd.png"></image><text style="vertical-align:middle;">{{item.store_name}}</text></text> </view> </view> </view> </view> </view> <view class="inline-block mr-20" v-if="scoreRecommendList.length"> <view class="w-454 rd-24rpx gradient_bg pt-22 pb-8"> <view class="fs-28 font-red lh-40rpx fw-600 pl-24 mb-18 flex-y-center" @tap="goRank(2)"> <image src="@/static/img/sales_icon.png" class="w-40 h-40"></image> <text class="pl-8">评分</text> </view> <view class="mx-8 rd-24rpx bg--w111-fff h-748 p-20"> <view class="flex-y-center" v-if="scoreRecommendList[0]" @tap="goDetail(scoreRecommendList[0])"> <view class="relative w-108 h-108"> <image :src="scoreRecommendList[0].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count1 fs-24 text--w111-fff flex-center">1</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{scoreRecommendList[0].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{scoreRecommendList[0].store_info}}</view> </view> </view> <view class="flex-y-center mt-16" v-if="scoreRecommendList[1]" @tap="goDetail(scoreRecommendList[1])"> <view class="relative w-108 h-108"> <image :src="scoreRecommendList[1].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count2 fs-24 text--w111-fff flex-center">2</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{scoreRecommendList[1].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{scoreRecommendList[1].store_info}}</view> </view> </view> <view class="flex-y-center mt-16 mb-34" v-if="scoreRecommendList[2]" @tap="goDetail(scoreRecommendList[2])"> <view class="relative w-108 h-108"> <image :src="scoreRecommendList[2].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count3 fs-24 text--w111-fff flex-center">3</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{scoreRecommendList[2].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{scoreRecommendList[2].store_info}}</view> </view> </view> <view class="flex-between-center scroll_cell" v-for="(item,index) in scoreRecommendList.slice(3)" :key="index" @tap="goDetail(item)"> <view class="flex-y-center"> <text class="inline-block w-30 h-32 lh-32rpx text--w111-fff text-center fs-24 rank_4">{{index + 4}}</text> <text class="fs-26 text--w111-333 ml-20 w-360 line1"> <image v-if="item.delivery_type.indexOf('2') > -1" style="height:32.6rpx;width:116.08rpx;margin-right:10rpx;vertical-align:middle;" src="https://www.ytzhan.com/uploads/uniapp/2-glodzt.pngwww.ytzhan.com/uploads/uniapp/2-glodzt.png"></image> <image v-if="item.delivery_type.indexOf('1') > -1" style="height:32.6rpx;width:116.08rpx;margin-right: 10rpx;vertical-align:middle;" src="https://www.ytzhan.com/uploads/uniapp/2-glodzt.pngwww.ytzhan.com/uploads/uniapp/2-glodkd.png"></image>{{item.store_name}}</text> </view> </view> </view> </view> </view> <view class="inline-block mr-20" v-if="collectRecommendList.length"> <view class="w-454 rd-24rpx gradient_bg pt-22 pb-8"> <view class="fs-28 font-red lh-40rpx fw-600 pl-24 mb-18 flex-y-center" @tap="goRank(3)"> <image src="@/static/img/sales_icon.png" class="w-40 h-40"></image> <text class="pl-8">收藏</text> </view> <view class="mx-8 rd-24rpx bg--w111-fff h-748 p-20"> <view class="flex-y-center" v-if="collectRecommendList[0]" @tap="goDetail(collectRecommendList[0])"> <view class="relative w-108 h-108"> <image :src="collectRecommendList[0].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count1 fs-24 text--w111-fff flex-center">1</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{collectRecommendList[0].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{collectRecommendList[0].store_info}}</view> </view> </view> <view class="flex-y-center mt-16" v-if="collectRecommendList[1]" @tap="goDetail(collectRecommendList[1])"> <view class="relative w-108 h-108"> <image :src="collectRecommendList[1].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count2 fs-24 text--w111-fff flex-center">2</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{collectRecommendList[1].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{collectRecommendList[1].store_info}}</view> </view> </view> <view class="flex-y-center mt-16 mb-34" v-if="collectRecommendList[2]" @tap="goDetail(collectRecommendList[2])"> <view class="relative w-108 h-108"> <image :src="collectRecommendList[2].image" class="w-108 h-108 rd-16rpx"></image> <view class="rank-count rank-count3 fs-24 text--w111-fff flex-center">3</view> </view> <view class="flex-1 h-108 flex-col flex-x-center ml-16"> <view class="flex-between-center"> <view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{collectRecommendList[2].store_name}}</view> </view> <view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{collectRecommendList[2].store_info}}</view> </view> </view> <view class="flex-between-center scroll_cell" v-for="(item,index) in collectRecommendList.slice(3)" :key="index" @tap="goDetail(item)"> <view class="flex-y-center"> <text class="inline-block w-30 h-32 lh-32rpx text--w111-fff text-center fs-24 rank_4">{{index + 4}}</text> <text class="fs-26 text--w111-333 ml-20 w-360 line1"> <image v-if="item.delivery_type.indexOf('2') > -1" style="height:32.6rpx;width:116.08rpx;margin-right:10rpx;vertical-align:middle;" src="https://www.ytzhan.com/uploads/uniapp/2-glodzt.pngwww.ytzhan.com/uploads/uniapp/2-glodzt.png"></image> <image v-if="item.delivery_type.indexOf('1') > -1" style="height:32.6rpx;width:116.08rpx;margin-right: 10rpx;vertical-align:middle;" src="https://www.ytzhan.com/uploads/uniapp/2-glodzt.pngwww.ytzhan.com/uploads/uniapp/2-glodkd.png"></image><text style="vertical-align:middle;">{{item.store_name}}</text></text> </view> </view> </view> </view> </view> </scroll-view> </view> <scroll-view scroll-y="true" class="fuzzy_modal" :style="{height:fuzzyHeight + 'px',top: 60 + 'px'}" v-if="newPartyList.length" @touchmove.stop.prevent="moveStop"> <view class="cell" v-for="(item,index) in newPartyList" :key="index" @tap="setCommentSearch(item.id)"> <view class="keyword line1" v-html="item.keyword"></view> </view> </scroll-view> </view> </template> <script> let sysHeight = uni.getSystemInfoSync().statusBarHeight; import home from '@/components/home/index.vue' import { getSearchKeyword, getSearchRecommendApi, getHotWordApi } from '@/api/store.js'; import { searchList, clearSearch } from '@/api/api.js'; import recommend from '@/components/recommend'; import colors from "@/mixins/color"; import { goShopDetail } from '@/libs/order.js'; import { HTTP_REQUEST_URL } from '@/config/app.js'; import { Debounce } from '@/utils/validate.js' export default { components: { recommend, home }, mixins: [colors], data() { return { hostProduct: [], searchValue: '', focus: true, bastList: [], hotSearchList: [], isSpin:false, first: 0, limit: 8, page: 1, loading: false, loadend: false, loadTitle: '加载更多', hotPage: 1, isScroll: true, history: [], imgHost: HTTP_REQUEST_URL, salesRecommendList:[], scoreRecommendList:[], collectRecommendList:[], sysHeight:sysHeight, newPartyList: [], //模糊搜索关键词列表 isShowMore: false }; }, computed: { fuzzyHeight() { let screenHeight = uni.getSystemInfoSync().screenHeight; return screenHeight - this.sysHeight - 56; } }, onLoad(e) { this.searchValue = e.searchVal || ''; this.getSearchHotKeywords(); this.getSearchRecommend(); setTimeout(()=>{ this.newPartySearch(); },1000) }, onShow: function(e) { uni.removeStorageSync('form_type_cart'); this.searchList(); }, methods: { refresh(){ this.isSpin = true; this.getSearchHotKeywords(); }, // 获取搜索热词 getSearchHotKeywords(){ getHotWordApi().then(res=>{ this.hotSearchList = res.data; setTimeout(_=>{ this.isSpin = false; },1000) }) }, searchList() { searchList({ page: 1, limit: 10 }).then(res => { this.history = res.data; }); }, clear() { let that = this; clearSearch().then(res => { uni.showToast({ title: res.msg, success() { that.history = []; } }); }); }, inputConfirm: function(event) { if (event.detail.value) { uni.hideKeyboard(); this.setHotSearchValue(event.detail.value); } }, setValue: Debounce(function(e){ this.newPartySearch(); }), newPartySearch: function() { getSearchKeyword({keyword:this.searchValue}).then(res => { this.newPartyList = res.data.list; this.newPartyList.map((item) => { this.$set(item,'keyword',this.brightKeyword(item.store_name,res.data.keyword)); }); }); }, brightKeyword(val,keyword) { if (val.indexOf(keyword) > -1) { val = `<p class="line1">${val}</p>` return val.replace(keyword, `<span style="color: #C9771E;">${keyword}</span>`); } else { return val; } }, setCommentSearch(id) { uni.navigateTo({ url:'/pages/goods/goods_list/index?productId=' + id }) }, setHotSearchValue: function(event) { this.$set(this, 'searchValue', event); this.focus = false; this.searchBut(); }, searchBut: function() { let that = this; that.focus = false; if (that.searchValue.length > 0) { this.newPartyList = []; uni.navigateTo({ url:'/pages/goods/goods_list/index?searchValue=' + that.searchValue }) } else { return this.$util.Tips({ title: '请输入要搜索的商品', icon: 'none', duration: 1000, mask: true, }); } }, getSearchRecommend(){ getSearchRecommendApi(1).then(res=>{ this.salesRecommendList = res.data; }) getSearchRecommendApi(2).then(res=>{ this.scoreRecommendList= res.data; }) getSearchRecommendApi(3).then(res=>{ this.collectRecommendList= res.data; }) }, // 去详情页 goDetail(item) { goShopDetail(item, this.uid).catch(res => { uni.navigateTo({ url: `/pages/goods_details/index?id=${item.id}` }); }); }, goRank(type){ uni.navigateTo({ url:`/pages/columnGoods/rank/index?type=${type}` }) }, clearSearchVal(){ this.searchValue = ''; this.newPartyList = []; } } } </script>排行榜有数据但是salesRecommendList、scoreRecommendList、collectRecommendList.length都为0且 即便res.data里有数据 打印出的length仍旧为0
06-24
<template> <div :class="['page-layout', wrapClass, isDark && 'theme-dark']"> <div :class="['page-layout--placeholer', breadMenuHidden && 'no-nav']"></div> <TopHeader class="page-layout__header" /> <SideBar :menus class="page-layout__side" /> <div :class="['page-layout__main', { 'no-nav': breadMenuHidden }]"> <div v-if="!breadMenuHidden" class="page-layout__main-nav" > <BreadMenu /> </div> <div class="page-layout__main-view" :class="{ 'is-mobile': appStore.$state.isMobile }" > <div v-if="pageTitle.visible" class="page-layout__main-view-title common-page-title" > <span> {{ pageTitle.label }}</span> <a-button v-if="route?.meta?.backBtn" type="primary" @click="handleBack" >{{ btnLabel }}</a-button > </div> <RouterView v-slot="{ Component }"> <KeepAlive :include="cacheViews"> <component :is="Component" :key="routeKey" /> </KeepAlive> </RouterView> </div> <!-- TODO: 底部有固定定位元素<MainFixedBar />时占位用 勿删! --> <div class="page-bar__fixed-placeholer"></div> </div> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, h, watchEffect, watch, nextTick } from "vue" import { useAppStore, useMsgStore, useUserStore, useSysConfigStore } from "@/stores" import TopHeader from "./components/TopHeader.vue" import SideBar from "./components/side-bar/index.vue" import BreadMenu from "./components/BreadMenu.vue" import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router" import { Button, Notification, type NotificationReturn } from "@arco-design/web-vue" import type { RecordModel as MessageData } from "@/api/message/api-type" import { IconRight } from "@arco-design/web-vue/es/icon" import { ORDER_TRANSFER } from "@/router/order" import { getSystemConfig } from "@/api/system/index.serv" import { to } from "await-to-js" defineOptions({ name: "Layout" }) const route = useRoute() const router = useRouter() const appStore = useAppStore() const userStore = useUserStore() const msgStore = useMsgStore() const sysConfigStore = useSysConfigStore() const orderMsgReturn = ref<NotificationReturn>() const breadMenuHidden = ref(false) const btnLabel = computed(() => { return window.opener ? "关闭" : route?.meta.backBtn?.label || "关闭" }) const cacheViews = computed(() => appStore.routeViewCache) const msgId = computed(() => msgStore.msgNoticeId) const pageTitle = computed(() => { const { navTitle, title, titleVisible } = route.meta ?? {} return { visible: title && titleVisible !== false, label: navTitle || title } }) const routeKey = computed(() => { const { name, query = {} } = route if (Object.keys(query).length) { return `${name as string}-${JSON.stringify(route.query)}` } return name as string }) const wrapClass = computed(() => { return appStore.menuStatus ? "menu-collapse" : "menu-expend" }) const isDark = computed(() => appStore.theme === "dark") const menus = computed(() => userStore.accessMenu ?? []) const menuMap = computed(() => userStore.accessMenuMap) const doOrderLoop = computed(() => { return [...menuMap.value.values()].some((list) => { const loopData = list?.meta?.doLoop if (!loopData) return false const { code, dependMenu } = loopData if (code === "order") { if (!dependMenu) return true return menuMap.value.has(dependMenu) } else { return false } }) }) watchEffect(() => { breadMenuHidden.value = route.meta?.breadMenuVisible === false }) const goToTransfer = (data: MessageData) => { router .push({ name: ORDER_TRANSFER.name }) .then((res) => { Notification.remove(msgId.value) }) } const showOrderMsg = (data: MessageData) => { return Notification.info({ icon: () => h("span", { class: ["iconfont icon-file"] }), title: "您有一个订单需要进行调度", content: data.msg_body, id: msgId.value, closable: true, duration: 0, class: "order-msg__tip", position: "bottomRight", footer: () => h( Button, { type: "text", onClick: () => goToTransfer(data) }, ["立即前往", h(IconRight)] ) }) } watch( [() => msgStore.msgTargetId, () => sysConfigStore.orderMessageConfig.orderNoticeSwitch as number], async ([id, orderNoticeSwitch]: [number | undefined, number]) => { await nextTick() if (id && msgStore.unreadMsgLatest && orderNoticeSwitch === 1) { const msgReturn = showOrderMsg(msgStore.unreadMsgLatest) orderMsgReturn.value ||= msgReturn } else { Notification.remove(msgId.value) } }, { immediate: true } ) const handleBack = () => { if (window.opener) { window.close() } else { const routeTo = route.meta?.backBtn?.routeTo if (routeTo) { router.replace({ name: routeTo }) } } } onMounted(async () => { msgStore.clearLoopTimer() const [err, res] = await to(getSystemConfig()) if (!err && res) { sysConfigStore.setUpdateConfig({ id: res.data.id, orderNoticeSwitch: res.data.orderNoticeSwitch }) doOrderLoop.value && msgStore.messageAndCountLoop() } }) onBeforeRouteLeave(() => { Notification.remove(msgId.value) msgStore.clearLoopTimer() }) </script> <style lang="scss" scoped> @import "../assets/styles/mixin.scss"; $--layout-transition-all: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); $--layout-transition-margin: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); $--layout-transition-left: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); .page-layout { height: 100%; display: flex; flex-direction: column; overflow: hidden; &--placeholer { flex: none; height: calc(var(--page-header-height) + var(--page-breadmenu-height)); transition: none; &.no-nav { height: var(--page-header-height); } } &__header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--page-max-z-index); flex: none; padding: 0 16px; height: var(--page-header-height); border-bottom: var(--color-border-2) 1px solid; background-color: #fff; transition: $--layout-transition-all; } &__side { position: fixed; z-index: var(--page-max-z-index); left: 0; top: var(--page-header-height); bottom: 0; display: flex; flex-direction: column; :deep(.arco-menu-inner) { flex: 1; margin-bottom: var(--menu-collapse-width); } :deep(.arco-menu-collapse-button) { position: absolute; } & + .page-layout__main { margin-left: var(--menu-expand-width); .page-layout__main-nav { left: var(--menu-expand-width); } } &.arco-menu-collapsed + .page-layout__main { margin-left: var(--menu-collapse-width); .page-layout__main-nav { left: var(--menu-collapse-width); } } } &__main { padding: var(--page-padding-gutter); padding-top: 0; transition: $--layout-transition-margin; height: 100%; display: flex; flex-direction: column; overflow-y: auto; @include scrollbar(8px, transparent, var(--color-fill-4)); &.no-nav { padding-top: var(--page-padding-gutter); } &-nav { flex: none; display: flex; align-items: center; background: var(--page-back-color); position: fixed; z-index: var(--page-max-z-index); top: var(--page-header-height); left: 0; right: 0; height: var(--page-breadmenu-height); padding: 0 var(--page-padding-gutter); transition: $--layout-transition-left; } &-content { position: relative; height: 100%; display: flex; flex-direction: column; padding: var(--page-padding-gutter); padding-top: --page-breadmenu-height; background: #f9f9f9; flex: 1; // margin-left: var(--menu-expand-width); // transition: margin-left 0.28s; // transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); &.no-nav { padding-top: var(--page-padding-gutter); } } &-view { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 4px; padding: var(--page-padding-gutter); // > :last-child:not(.common-page-title) { // flex: 1; // display: flex; // flex-direction: column; // } &-title { display: flex; justify-content: space-between; align-items: center; } } } &.theme-dark { .page-layout__header, .page-layout__side { background: var(--color-text-2); } } } </style> <style lang="scss"> .order-msg__tip { .arco-notification-title { font-weight: 600; } .arco-notification-left { padding-right: 5px; .arco-notification-icon { font-size: 16px; color: var(--color-text-2); } } .arco-notification-content { margin-top: 6px; } } </style>
最新发布
06-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值