uniapp 二次封装ui组件加class样式或修改样式在微信小程序不生效的情况

原因:首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。

微信小程序组件隔离文档参考

组件样式隔离

默认情况下,自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况:

  • 指定特殊的样式隔离选项 styleIsolation 。
  • webview 渲染下,在 app.wxss 或页面的 wxss 中使用标签名选择器(或一些其他特殊选择器)来直接指定样式会影响到页面和全部组件。通常情况下这是不推荐的做法。
{
  "styleIsolation": "isolated"
}

自定义组件 JSON 中的 styleIsolation 选项从基础库版本 2.10.1 开始支持。它支持以下取值:

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

使用后两者时,请务必注意组件间样式的相互影响。

如果这个 Component 构造器用于构造页面 ,则默认值为 shared ,且还有以下几个额外的样式隔离选项可用:

  • page-isolated 表示在这个页面禁用 app.wxss ,同时,页面的 wxss 不会影响到其他自定义组件;
  • page-apply-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式不会影响到其他自定义组件,但设为 shared 的自定义组件会影响到页面;
  • page-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件,也会受到设为 shared 的自定义组件的影响。

示例:

复制代码
<template>
    <view class="confirm-modal">
        <u-modal :show="show" :title="title" :showConfirmButton="false">
            <view class="slot-content">
                <slot name="content"></slot>
            </view>
        </u-modal>
    </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        },
        showModal: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        show() {
            return this.showModal
        }
    },
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    },
    data() {
        return {}
    },
    methods: {}
}
</script>

<style lang="scss">
// 弹窗
/deep/.confirm-modal {
    .u-modal {
        .slot-content {
            width: 100%;
        }
    }
}
</style>
复制代码

 

 

 

 

 

 

 

 
 
 

 

 

posted @   Stitchhhhh  阅读(1335)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示