148 行
3.0 KiB
Plaintext
148 行
3.0 KiB
Plaintext
<template>
|
|
<view :style="{ width: props.width + 'px', height: props.height + 'px' }" class="uni-tab-list-item-midbutton-root">
|
|
<view class="uni-tab-list-item-midbutton-slot">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
/**
|
|
* 选项卡中间按钮
|
|
* @description 选项卡中间悬浮按钮组件
|
|
* @uniPlatform {
|
|
* "app": {
|
|
* "android": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.21"
|
|
* },
|
|
* "ios": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.11"
|
|
* },
|
|
* "harmony": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.07"
|
|
* }
|
|
* },
|
|
* "mp": {
|
|
* "weixin": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07"
|
|
* }
|
|
* },
|
|
* "web": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07"
|
|
* }
|
|
* }
|
|
*/
|
|
type Props = {
|
|
/**
|
|
* @description 中间按钮宽度，单位 px
|
|
* @default 90
|
|
* @uniPlatform {
|
|
* "app": {
|
|
* "android": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.21"
|
|
* },
|
|
* "ios": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.11"
|
|
* },
|
|
* "harmony": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.07"
|
|
* }
|
|
* },
|
|
* "mp": {
|
|
* "weixin": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07"
|
|
* }
|
|
* },
|
|
* "web": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07"
|
|
* }
|
|
* }
|
|
*/
|
|
width?: number,
|
|
/**
|
|
* @description 中间按钮高度，单位 px
|
|
* @default 90
|
|
* @uniPlatform {
|
|
* "app": {
|
|
* "android": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.21"
|
|
* },
|
|
* "ios": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.11"
|
|
* },
|
|
* "harmony": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07",
|
|
* "unixVaporVer": "5.07"
|
|
* }
|
|
* },
|
|
* "mp": {
|
|
* "weixin": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07"
|
|
* }
|
|
* },
|
|
* "web": {
|
|
* "uniVer": "x",
|
|
* "unixVer": "5.07"
|
|
* }
|
|
* }
|
|
*/
|
|
height?: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
width: 90,
|
|
height: 90
|
|
})
|
|
const registerMidButton = inject<(width : number, height : number) => void>('uniTabListRegisterMidButton', (width : number, height : number) => {})
|
|
|
|
|
|
onMounted(() => {
|
|
registerMidButton(props.width, props.height)
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.uni-tab-list-item-midbutton-root {
|
|
width: 90px;
|
|
height: 90px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.uni-tab-list-item-midbutton-slot {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
}
|
|
</style>
|