uniapp Vue3 微信小程序组件样式隔离

在微信小程序中，组件样式默认是隔离的，即组件的样式不会影响其他组件或页面。通过设置 styleIsolation 可以调整组件样式的隔离行为。在 Vue3 的 uniapp 项目中，可以通过 defineOptions 来配置组件的样式隔离选项。

使用 defineOptions 配置样式隔离

在组件的 <script setup> 中，可以通过 defineOptions 设置 styleIsolation 为 "shared"，这样组件的样式可以共享到页面或其他组件：

<script setup>
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
</script>

样式隔离选项说明

微信小程序支持的 styleIsolation 选项包括：

• isolated：默认值，组件样式隔离，不会影响其他组件或页面。
• apply-shared：页面样式会影响组件，但组件样式不会影响页面。
• shared：组件样式和页面样式互相影响。

注意事项

• 在 uniapp 中，defineOptions 是 Vue3 的语法，用于配置组件的选项。
• 微信小程序的样式隔离仅在小程序环境中生效，H5 或其他平台可能不支持此特性。
• 使用 shared 时需谨慎，避免样式冲突导致布局问题。

示例代码

以下是一个完整的组件示例，配置了样式隔离为 shared：

<template>
  <view class="custom-component">
    <text>这是一个共享样式的组件</text>
  </view>
</template>

<script setup>
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
</script>

<style>
.custom-component {
  color: red;
}
</style>

兼容性处理

如果需要多平台兼容，可以通过条件编译区分平台：

<script setup>
// #ifdef MP-WEIXIN
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
// #endif
</script>

这样配置后，样式隔离仅在微信小程序平台生效。