提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

关于vue中-js使用-css的变量,和css使用js定义的变量

JSVue变量CSS 关于 定义 使用
2023-09-11 14:19:37 时间

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

 

相关文章