摘要:有时候基于的单文件组件开发项目时不得不使用全局样式这时有一些需要注意的地方当遇到需要使用全局样式时下列几种情况样式在项目各处均有使用样式只在当前组件内的上使用样式需要应用到当前组件的外部下面详细记录一下需要注意的问题样式在项目各处均有使用如
有时候基于 Vue 的单文件组件开发项目时, 不得不使用全局样式, 这时有一些需要注意的地方.
当遇到需要使用全局样式时, 下列几种情况
样式在项目各处均有使用;
样式只在当前组件内的 DOM 上使用;
样式需要应用到当前组件 DOM 的外部 DOM;
下面详细记录一下需要注意的问题:
样式在项目各处均有使用如果样式需要在项目各处均有使用, 例如: reset.css, tiny-trim.css 等等.
这时推荐在项目入口文件中直接导入样式文件:
// src/main.js import "tiny-trim.css" import "asset/reset.css" import "asset/global.css"
当然, 也可以在顶层组件中没有设置 scoped 属性的 style 标签中导入:
@import url(asset/reset.css); @import url(asset/global.css);样式只在当前组件内的 DOM 上使用
当使用一些第三方 UI 库时, 有一些 UI 库生成的 DOM 在 template 中并不能直接添加 class 或 style 来修改第三方 UI 库的组件样式, 这时我们可以通过当前组件没有 scoped 属性的 style 标签来添加全局样式.
但此时需要考虑一些问题:
这个样式应该只影响当前组件内第三方 UI 库渲染出来的 DOM
因为 DOM 不在 template 标签里 (DOM 由第三方 UI 库的 JS 在浏览器加载时构建或在编译打包过程中生成), 不能直接设置 class 或 style 来修改样式, 故只能使用没有 scoped 属性的 style 标签
可以看出两点是有一定矛盾的. 不过可以采用如下方法解决或缓解:
为当前组件根元素设置自定义 data 属性
在没有 scoped 属性的 style 标签中使用自定义 data 属性限定样式作用域
.my-component[data-custom-mycomponent] { // ... }
这里推荐使用 Less 或 Sass, 嵌套语法能减少许多代码冗余.样式需要应用到当前组件 DOM 的外部 DOM
这种情况主要是针对上一种情况的补充, 有时候第三方 UI 库生成的 DOM 节点并不在当前组件的 DOM 内, 可能渲染到 body 中 (如 dialog, tooltip, message 等).
这些渲染到当前组件 DOM 之外的组件, 需要在上一种情况的处理基础上, 为它们的顶层元素再设置一个自定义的 data 属性:
.my-component[data-custom-mycomponent] { // ... } .my-component-message[data-custom-mycomponent-message] { // ... }
-EOF
原文: [笔记] 当在 Vue 中不得不用全局样式时...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93328.html
摘要:有时候基于的单文件组件开发项目时不得不使用全局样式这时有一些需要注意的地方当遇到需要使用全局样式时下列几种情况样式在项目各处均有使用样式只在当前组件内的上使用样式需要应用到当前组件的外部下面详细记录一下需要注意的问题样式在项目各处均有使用如 有时候基于 Vue 的单文件组件开发项目时, 不得不使用全局样式, 这时有一些需要注意的地方. 当遇到需要使用全局样式时, 下列几种情况 样式在...
摘要:由于公司的前端开始转向,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。查了一下,发现可能是打包或是资源引用问题,目前该问题还未被妥善处理,需要通过一些来解决这个问题。为解决这个问题,中提供了方法对象受现 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端开始转向 VueJS,最近开始使用这...
摘要:作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。这样,一直延续到全局执行环境全局执行环境的变量对象始终都是作用域链中的最后一个对象。如果在局部环境中没有找到该变量名,则继续沿作用域链向上搜索。 【JavaScript.ES5】执行环境和作用域 参考文献: Nicholas C.Zakas 《JavaScript》高级程序设计 仅为个人学习参考文献的内容记录的笔记。存...
摘要:组件的复用你可以将组件进行任意次数的复用注意当点击按钮时,每个组件都会各自独立维护它的。 1、基本示例 // 定义一个名为 button-counter 的新组件 Vue.component(button-counter, { data: function () { return { count: 0 } }, template: You cli...
摘要:各模块各司其职,提高开发效率。使用生成的项目目录里,我们主要关注目录。这个是我们之前提到的单页面组件。这是项目的路由文件,存放项目中所有的路由。这里和我们之前所学没什么不同,不过是涉及了不少的知识。 一、vue模块化开发 所谓的模块化开发是指将不同的部分封装到不同的模块中,不再将所有的组件、路由等写在一个页面中。各模块各司其职,提高开发效率。 使用vue-cli生成的项目目录里,我们主...
阅读 2084·2023-04-25 18:49
阅读 1811·2019-08-30 14:02
阅读 2601·2019-08-29 17:24
阅读 3294·2019-08-28 18:10
阅读 2894·2019-08-28 18:03
阅读 439·2019-08-26 12:01
阅读 3274·2019-08-26 11:31
阅读 1306·2019-08-26 10:29