关于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

 

posted @   与f  阅读(1069)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2021-04-22 C# Winform设置焦点focus(textbox)和全选
2021-04-22 C# 运用 log4net.dll 记录日志文件
2021-04-22 C#使用log4net记录日志(项目中用的此方法,在类库里面写的)
2020-04-22 java控制台等待输入
点击右上角即可分享
微信分享提示