VUE JS与CSS相互引用变量

最新推荐文章于 2024-09-09 20:45:20 发布

Ta曰丿、她活

最新推荐文章于 2024-09-09 20:45:20 发布

阅读量947

点赞数 1

分类专栏： Vue 文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/zlw_spider/article/details/129309730

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中通过Sass定义CSS变量，并使用`:export`导出以便在JavaScript中引用。在组件中，动态地根据JS变量调整CSS样式，例如通过`props`传递`tableHeight`来设置固定高度。这展示了前端开发中样式和逻辑的紧密结合。

摘要由CSDN通过智能技术生成

variables.css内容：要达到以下效果还得安装sass相关插件

// 底部版权区域高度
$footer-reserved-height: 30px;

// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  footerReservedHeight: $footer-reserved-height;
}

【1】JS中引用CSS的变量

import variables from '@/assets/styles/variables.scss'

computed: {
    ...mapGetters('app', ['isMobile']),
    variables() {
      return variables
    },
    tableBodyHeight() {
      if(!!this.tableHeight) {
        return this.tableHeight
      }
      return this.variables.tableHeight
    }
},

【2】CSS中引用JS中的变量

<template>
<div
  class="table-main"
  :style="{'--tableHeight': `${tableHeight}px`}"
>

</div>
</template>

<script>
export default {
  props: {
    tableHeight: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-height {
   height: var(--tableHeight);
   max-height: var(--tableHeight);
}
</style>