首頁 > 軟體

手把手教你拿捏vue cale()計算函數使用

2023-04-08 06:00:43

前言

最近專案中遇到calc()方法不生效問題,本著究其所以然的想法,徹底查了一下calc的方法及使用,還有為什麼專案中使用不生效的問題,最後總結出此文,解決方法放在結尾了

cale()是什麼

calc是英文單詞calculate的縮寫,其實主要用於對專案中一些單位的計算,這裡的計算是在calc()函數裡面填充表示式去計算,它會返回具體的值

基本使用

平常我們專案中遇到最多的就是一些普通計算了比如:

<body>
    <div class="content"></div>
</body>
// style
 .content{
   height: calc(100% - 32px);
 }

這裡計算出來的就是頁面減去32畫素單位的高度,如果父盒子有高度,這個100%就是繼承父盒子的高度

<div style="height: 200px">
    <div class="content"></div>
</div>
// style
.content {
  background-color: #6b3434;
  height: calc(100% - 100px);
}

除了加減法calc()還支援乘除,乘除法要求必須要有一個引數是數位,而且除法的右邊引數必須是數位;加、減、乘、除('+'、'-'、'*'、'/'、),乘除法的運算規則也是一樣的會先運算乘除再算加減,所以我們不需要刻意的使用括號去包裹,但是如果你是需要先運算加減則要先用括號進行包裹

靈活使用

calc()除了這些用法還有一些比較靈活用法:

// 計算屬性裡面
newWidth:{
// data裡設定一個menuWidth變數來操控width的大小
    return width: `calc(100% - ${menuWidth}px)`
}

還有比如我這篇旋轉方塊裡面的每一個點的旋轉用到的就是css中的自定義屬性來運算,運用style中的--i屬性來控制變數,從而減少我們大量的css去計算的程式碼

transform: rotate(calc(30deg * var(--i)));

而且calc()還支援混合單位運算,在引數單位不同時,會做預處理比如:

// turn 代表一個圓的圈,1turn就是一圈
// deg 代表角度45deg就是45度
transform: rotate(calc(1turn + 45deg))

而且calc()支援很多單位:'px,%,em,rem,vw,vh,cm,pt,pc,vmin,vmax,vh'等

注意

calc()表示式的引數一定要用空格隔開,並且也是支援負數計算的,而且calc()不支援媒體查詢哦!!

// 本身寫法
@media (max-width: 600px) {
}
// 不支援的calc寫法
@media (min-width: calc(400px + 200px)) {
}

相容性

結尾

本人專案中使用的less前處理器,所以在使用calc()時會和less的一些語法有衝突,所以官方推薦使用 '~' 來進行轉譯這是官方檔案

以上就是手把手教你拿捏vue cale()計算函數使用的詳細內容,更多關於vue cale()計算函數使用的資料請關注it145.com其它相關文章!


IT145.com E-mail:sddin#qq.com