沐鳴登錄_在vue中實現了在樣式里使用js變量的方法

一、內容簡介

在使用vue開發時,經常會封裝很多的組件方便復用,那麼難免就有寫樣式相關組件,比如需要使用時傳入顏色、高度等樣式參數。那麼問題來了:我們要怎麼在樣式中使用組件中接收的參數呢?或者說,我們要怎麼在樣式中使用data中的變量呢?

二、代碼演示

這個用法真的簡單,沒什麼其他的知識點,直接上代碼:

<template>
  <div class="box" :style="stylevar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    stylevar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>

這樣我們就在vue中實現了在樣式里使用js變量的方法:
及通過css定義變量的方式,將變量在行內注入,然後在style中使用var()獲取我們在行內設置的數據即可。

三、最後

以後,在封裝一些需要動態傳入樣式參數的ui組件是不是簡便了不少。你學會了么?趕快在項目中嘗試一下吧~~ 

鏈接:https://juejin.cn/post/6911662617178144776


站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/10003