使用 ::v-deep 兼容更高!!!

从以下地址拿的

https://www.jianshu.com/p/2c65d9c5a78b

————————————————————————————————————————

深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,
例如影响子组件,你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>,
这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

 注意最后一句话,在 scss 环境下,就是上面高度没有生效的例子,当我们指定 lang='scss' 样式就会全部失效。效果如下:

<template>
    <div>
        <el-input></el-input>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped lang="scss">
    div{
        margin: 50px;
    }
    >>> .el-input__inner{
        width: 190px;
        height: 500px;
    }
</style>

去掉 lang 并且高度生效案例如下:

<template>
    <div>
        <el-input></el-input>
    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped>
div{
    margin: 50px;
}
>>> .el-input__inner{
    width: 190px;
    height: 500px;
 }
/*下面这个方法也可以*/
/deep/ .el-input__inner{
    width: 190px;
    height: 500px;
 }
</style>

所以在css上面定义“scoped“ 就可以覆盖原来的样式了

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐