时间戳

首页 > 解决方案 > 定义js和css中使用的变量

vue.js - 定义js和css中使用的变量

问题描述

比如我想定义一个全局颜色a = '#FFF'，在js和css中引用，确保a项目中只有一种颜色命名。那么当值a改变时，ajs和css中的值也改变了。这在vue中可能吗？

标签： vue.js

解决方案

嗯...我正在考虑将观察者watch与 CSS 变量结合起来。

也许是这样的？每当a更改时，CSS 变量--a也会更改。

您实际上可以输入您想要的任何颜色格式。十六进制、RGB、RGB...

let v = new Vue({
   el: "#app",
   data: {
      a: "red"
   },
   watch: {
      a(val){
         document.documentElement.style.setProperty("--a", val);
      }
   }
})
:root {
   --a: red;
}
#app {
   height: 100px;
   width:100%;
   background: var(--a);
   transition: background 500ms;
}

p {
   background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <p>Color: {{a}}</p>
   <input v-model="a">
</div>

推荐阅读