Vue scoped CSS 与深度作用选择器 deep

作者：管理员 2018-06-17 15:08:31 分类：Vue2.js专栏阅读（15267） 0

使用 scoped 后，父组件的样式将不会渗透到子组件中。

例如（无效）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
<div id="app">
<el-input class="text-box" v-model="text"></el-input>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script>

<style lang="less" scoped>
.text-box {
input {
width: 166px;
text-align: center;
}
}
</style>

解决方法:

使用深度作用选择器 /deep/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
<div id="app">
<el-input v-model="text" class="text-box"></el-input>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script>

<style lang="less" scoped>
.text-box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>

简便方式

1
2
3
4

以上将编译成：

1	.a[data-v-f3f3eg9] .b { /* ... */ }

官方文档：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(10) 打赏

标签：

deep scoped Vue.js

上一篇：Javascript生成唯一id标识符（GUID,UUID,ID）的方法

下一篇：web前端培训机构哪里好哪个好，是否值得？

Vue scoped CSS 与深度作用选择器 deep

例如（无效）：

解决方法:

使用深度作用选择器 /deep/

简便方式

以上将编译成：

相关推荐

共 0 条评论关于"Vue scoped CSS 与深度作用选择器 deep"

点击取消