vue 自定义CSS变量var()的办法（修改全局样式 v |
您所在的位置：网站首页 › vue动态style › vue 自定义CSS变量var()的办法（修改全局样式 v |
|
文章目录
一、参考二、问题描述三、第一个方案——动态 style 标签第一个例子第二个例子
四、第二个方案——CSS 变量4.1 快速入门 CSS 变量 ，var() 函数4.2 快速入门案例4.3 Vue 修改CSS变量案例
五、总结
一、参考
js修改style样式_Vue 动态样式黑魔法（超实用）CSS 变量教程 阮一峰
二、问题描述
工作中使用 elementUI 的scrollbar 组件，例如 ，只能让 wrap-class设置具体的类名，当浏览器窗口发生变化的时候，类名没有改变，则对应的样式也没有改变，导致scroll无法做到“自适应窗口变化”的效果 众所周知，Vue 中动态绑定样式是用 :style，或者是动态绑定 :class class，不同的 class 样式提前写好且不一样。 但是如果是 ::after伪元素或者要改变的样式用 js 计算很复杂但是用 CSS 计算很简单的话，这种方法就略显得麻烦。有没有什么办法能用 Vue 直接改变 CSS，而不用这一套绑定的办法呢。答案是有的！ 这里给出两个实现方案。 三、第一个方案——动态 style 标签其实早在 Vue 0.x 和 1.x 版本这样做一度很流行（和这种升级的方案略有不同） 第一个例子 .foo[data-id="{{ uniqueId }}"] { color: {{ color }}; } .foo[data-id="{{ uniqueId }}"] .bar { text-align: {{ align }} } hello world export default { computed: { uniqueId() { return 一个独一无二的id; // 是因为这样生成的 style 没有 scoped，别的组件也能使用这个样式 }, color() { return someCondition ? 'red' : '#000'; }, align() { return someCondition ? 'left' : 'right'; } } } 第二个例子 .{{ className }} { background: {{ bgColor }}; position: relative; } .{{ className }}:hover { color: {{ hoverColor }}; } .{{ className }}::after { content: ''; display: block; height: 40px; width: 40px; border: 1px solid black; border-radius: 50%; position: absolute; top: 100%; } Vue.component('v-style', { render: function (createElement) { return createElement('style', this.$slots.default) } }); export default { data () { return { className: "temp", hoverColor: "yellow", bgColor: "blue" } }, computed () { // 这里和上面一样，所以略去生成 uniqueId 的过程 } } 四、第二个方案——CSS 变量上面的方案之所以被 Vue 官方不赞成，是因为 Vue 在每次渲染的时候会把每个组件的 style 标签单独拎出来，比较耗费性能。所以有没有一个直观的方案就是 Vue 直接操纵 CSS 呢?，有的，借助 CSS 变量就可以。 4.1 快速入门 CSS 变量 ，var() 函数声明变量的时候，变量名前面要加两根连词线（--）。 var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 var()函数用于读取变量。 :root 用来定义全局变量 如果是局部变量，则可以在 样式中定义局部变量 4.2 快速入门案例 如何定义全局变量和局部变量 DOCTYPE html> 菜鸟教程(runoob.com) :root { --main-bg-color: coral; --main-txt-color: blue; --main-padding: 15px; } #div1 { background-color: var(--main-bg-color); color: var(--main-txt-color); padding: var(--main-padding); } #div2 { /* 局部定义变量，覆盖默认 root 定义的全局变量 */ --main-bg-color: green; --main-txt-color: red; background-color: var(--main-bg-color); color: var(--main-txt-color); padding: var(--main-padding); } #div3 { /* 定义局部变量 */ --size: 22; background-color: var(--main-bg-color); color: var(--main-txt-color); /* 由于var()后面会默认跟随一个空格，因此在其后面加单位是无效的，比如：--size:20; font-size: var(--size)px会解析成font-size: 20 px; */ padding: calc(var(--size) * 1px); } var() 函数 菜鸟教程 - 学的不仅是技术，更是梦想！ 菜鸟教程 - 学的不仅是技术，更是梦想！ 菜鸟教程 - 学的不仅是技术，更是梦想！ 如何通过修改样式变量改变样式 DOCTYPE html> 菜鸟教程(runoob.com) :root { --color: green; } .box { --color: yellow; } #box { --color: orange; } * { color: var(--color); } 我是绿色，继承根元素 我是黄色，通过类设置的 我是橙色，通过ID设置的（权重最大） 改变背景为蓝色 function changeBg() { document.getElementById("box").style = "--color: blue;" } 4.3 Vue 修改CSS变量案例 hello world |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |