关于vue中-js使用-css的变量,和css使用js定义的变量
Less Scss 预处理语言
通常咱们会应用less等预处理语言来设定全局的色彩治理
color.less
// DARK-THEME
@base-bg: #001f3b;
// @base-bg: #042d6b;
@light-font-color: rgb(219, 219, 219);
@shadow-color: rgb(59, 54, 54);
@menu-active-color: rgb(193, 194, 196);
@table-head-color: rgba(69, 107, 150, 0.808);
@btn-hover-color: #0f2035;
@primary-color: #39bfed;
@primary-color-opacity: #39c0ed67;
@bg-content: rgba(27, 159, 225, 0.205);
@bg-content-3: rgba(27, 159, 225, 0.116);
有的时候某些场景咱们须要在JS中去应用这些色彩
比方咱们在应用echarts的时候,这时候咱们能够应用 :export 来导出变量
index.less
// DARK-THEME @base-bg: #001f3b; // @base-bg: #042d6b; @light-font-color: rgb(219, 219, 219); @shadow-color: rgb(59, 54, 54); @menu-active-color: rgb(193, 194, 196); @table-head-color: rgba(69, 107, 150, 0.808); @btn-hover-color: #0f2035; @primary-color: #39bfed; @primary-color-opacity: #39c0ed67; @bg-content: rgba(27, 159, 225, 0.205); @bg-content-3: rgba(27, 159, 225, 0.116); :export { primary: @primary-color; primaryOpacity: @primary-color-opacity; }
component.vue
import colors from '../common/color.less' const chartOption = { xAxis: { type: 'value', splitLine: 'none', axisLine: { lineStyle: { color: colors.primary } }, }, yAxis: { type: 'category', splitLine: 'none', axisLine: { lineStyle: { color: colors['primary'] } }, }, }
在vue的style中应用js变量
vue2应用变量形式为传入vars
export default { data () { return { red: 'red' } } } <style lang="less" scoped vars="{red}"> p { color: var(--red) } </style>
vue3中咱们能够子style中间接应用v-bind(attr)来应用变量
<template> <p :class="$style.red"> Edit <code>components/HelloWorld.vue</code> to test hot module replacement. </p> </template> <script setup> const color = 'green' </script> <style scoped module> .red { color: v-bind(color); } </style>
转 : https://lequ7.com/guan-yu-cssvue-zhong-shi-yong-css-bian-liang.html