ifanrx 组件库

Appearance

z-index 管理方案 ​

@ifanrx/uni-mp 的组件目前采用了来自 uView 的灵感，用于管理 z-index。其核心思想是为不同类别的组件配置不同的 z-index 数值，从而将组件分类，以确保各组件之间的 z-index 不会产生冲突。

当前的 z-index 数值配置如下：

js
export default {
  // mp-message
  toast: 10090,
  // popup 也包含 mp-dialog
  popup: 10075,
  // mask 遮罩层
  mask: 10070,
  // mp-nav-bar
  navbar: 980,
  // 适用于悬浮的提示和按钮
  floating: 975,
  // 吸顶的 tab、搜索框之类
  sticky: 970,
}
export default {
  // mp-message
  toast: 10090,
  // popup 也包含 mp-dialog
  popup: 10075,
  // mask 遮罩层
  mask: 10070,
  // mp-nav-bar
  navbar: 980,
  // 适用于悬浮的提示和按钮
  floating: 975,
  // 吸顶的 tab、搜索框之类
  sticky: 970,
}

你可以通过引入 zIndex 获取这个配置，以便在项目中使用正确的 z-index 数值：

js
import {zIndex} from '@ifanrx/uni-mp'
import {zIndex} from '@ifanrx/uni-mp'

你可以根据不同场景选择哪一种方式使用这个 zIndex 对元素进行配置。第一种方式是直接设置行内样式：

vue
<script setup>
import { zIndex } from '@ifanrx/uni-mp'
</script>

<template>
  <div :style="{ zIndex: zIndex.floating }">
</template>
<script setup>
import { zIndex } from '@ifanrx/uni-mp'
</script>

<template>
  <div :style="{ zIndex: zIndex.floating }">
</template>

第二种方式是使用 CSS 的 v-bind 函数，以便在 style 标签内使用（适用于需要配合 :deep 的场景）：

vue
<script setup>
import { zIndex } from '@ifanrx/uni-mp'
</script>

<template>
  <div class="xxx">
</template>

<style scoped>
.xxx {
  z-index: v-bind('zIndex.floating');
}
</style>
<script setup>
import { zIndex } from '@ifanrx/uni-mp'
</script>

<template>
  <div class="xxx">
</template>

<style scoped>
.xxx {
  z-index: v-bind('zIndex.floating');
}
</style>

这个 z-index 管理方案可帮助你更好地组织和使用 z-index 数值。