CSS 层级管理 - zIndex

@ifanrx/uni-mp 组件的 CSS z-index 层级管理方案方案参考 uView。其核心思想是为不同类别的组件配置不同的 z-index 数值，从而将组件分类，以确保各组件之间的 z-index 不会产生冲突。

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

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 数值：

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

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

vue

<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>

CSS 层级管理 - zIndex ​

CSS 层级管理 - zIndex