136 lines
2.8 KiB
Vue
136 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
:style="{
|
|||
|
|
paddingTop: seatHeight + 'px',
|
|||
|
|
}"
|
|||
|
|
class="layer"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:style="{
|
|||
|
|
...basePosition,
|
|||
|
|
width: '100%',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<view :style="{ position: 'absolute', ...baseBackground }"></view>
|
|||
|
|
<view class="fix-base-style" :style="baseStyle" :class="[`fix-base-style-${index}`]">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup name="fix-base-style">
|
|||
|
|
import { computed, watch, ref, nextTick, getCurrentInstance } from "vue";
|
|||
|
|
import { baseProps } from "../../hooks";
|
|||
|
|
|
|||
|
|
const { proxy }: any = getCurrentInstance();
|
|||
|
|
const { statusBarHeight = 0 } = uni.getSystemInfoSync();
|
|||
|
|
|
|||
|
|
// 定义属性，简化默认对象的写法
|
|||
|
|
const props = defineProps({
|
|||
|
|
...baseProps,
|
|||
|
|
// 背景跟随子元素的间距圆角
|
|||
|
|
flowInner: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
statusBar: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
index: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 计算 baseStyle，使用解构优化
|
|||
|
|
const baseStyle = computed(() => {
|
|||
|
|
const { marginTop, marginBottom, marginLR, padding, borderTopLR, borderBottomLR } =
|
|||
|
|
props.styleSpacing;
|
|||
|
|
|
|||
|
|
const { color } = props.styleColor;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
margin: `${marginTop}rpx ${marginLR}rpx ${marginBottom}rpx ${marginLR}rpx`,
|
|||
|
|
color: color,
|
|||
|
|
padding: `${padding}rpx`,
|
|||
|
|
borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
const baseBackground = computed(() => {
|
|||
|
|
const { backgroundColor, opacity } = props.styleColor;
|
|||
|
|
const { marginTop, marginBottom, marginLR, borderTopLR, borderBottomLR } = props.styleSpacing;
|
|||
|
|
let flow: any = {
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
right: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
};
|
|||
|
|
if (props.flowInner) {
|
|||
|
|
flow = {
|
|||
|
|
left: `${marginLR}rpx`,
|
|||
|
|
top: `${marginTop}rpx`,
|
|||
|
|
right: `${marginLR}rpx`,
|
|||
|
|
bottom: `${marginBottom}rpx`,
|
|||
|
|
borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
backgroundColor: backgroundColor,
|
|||
|
|
opacity: opacity,
|
|||
|
|
zIndex: -1,
|
|||
|
|
...flow,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const basePosition = computed(() => {
|
|||
|
|
const { top, mode, zIndex } = props.position;
|
|||
|
|
let topPos = top;
|
|||
|
|
if (props.statusBar) topPos = topPos + statusBarHeight;
|
|||
|
|
return {
|
|||
|
|
top: `${topPos}px`,
|
|||
|
|
position: mode,
|
|||
|
|
zIndex: zIndex,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
const seatHeight = ref(0);
|
|||
|
|
watch(
|
|||
|
|
() => props.position,
|
|||
|
|
async (position) => {
|
|||
|
|
if (position.isSeat && position.mode === "fixed") {
|
|||
|
|
refreshSeat();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function refreshSeat() {
|
|||
|
|
nextTick(() => {
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
// #ifndef MP-ALIPAY
|
|||
|
|
.in(proxy)
|
|||
|
|
// #endif
|
|||
|
|
.select(`.fix-base-style-${props.index}`)
|
|||
|
|
.boundingClientRect((res: any) => {
|
|||
|
|
seatHeight.value = res.height;
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.layer {
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
.fix-base-style {
|
|||
|
|
height: auto;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|