vue scope的用法和添加全局样式 |
您所在的位置：网站首页 › scoped样式 › vue scope的用法和添加全局样式 |
|
这是我参与8月更文挑战的第10天，活动详情查看：“8月更文挑战“
用法
scope是实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。 scope的渲染规则 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性 添加全局样式 改变引入组件的样式虽然使用scope能够避免当前样式污染全局，但是有时候我们需要更改引入项目里的组件样式，所以就需要使用深度选择器：>>> ,或者在某些预编译器不能使用该符号，可以使用/deep/ 或 ::v-deep来改变引入组件的样式 less使用/deep/ .searchforminline-out { /deep/ input{ width: 50px; } 复制代码 另外一种改变全局样式的方法保持原来的 不变，再添加一个 在里面修改全局样式 改变app外层div的样式 如 body因为scope的原因，我们在组件内部的style里是改变不了app外层的div的样式，如body。 如果我们要改变body，我们可以在mount阶段给body添加clas，来改变样式 .body{ body{ background-color:red; } } 复制代码 document.body.classList.add() 复制代码为了不影响其他页面的全局样式，我们可以在离开该组件，在beforeDestroy时，删除该class beforeDestroy(){ document.body.classList.remove() } 复制代码 不使用scope 来做到组件样式不污染全局即给每个组件都在外层套上一层div，设置唯一的class，在组件里写样式，即适用div的class为开头，这样可以做到在全局环境中使用组件的单独样式， |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |