vue利用指令實現快速設置元素的高度

更新時間：2024年03月11日 08:52:26 作者：pe7er

在項目中經常有需要將列表的高度設置成剩余可視區(qū)域的高度,本文主要來和大家介紹一下如何通過指令和css變量的方式快速設置列表高度,希望對大家有所幫助

在項目中經常有需要將列表的高度設置成剩余可視區(qū)域的高度，一般的做法是用ref獲取后，計算元素的top，然后通過v-bind()將top注入到style中

cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css

height: calc(100vh - v-bind(top))

下面介紹一種通過指令和css變量的方式快速設置列表高度的方法，下面是代碼示例。

import type { DirectiveBinding, Directive } from 'vue'

const PREFIX = '--bounding-info-'
interface IOptions {
  prefix?: string
}

const setStyles = (el: HTMLElement, options: IOptions = {}) => {
  const { prefix = PREFIX } = options
  const boundingClientRectInfo = el.getBoundingClientRect()
  const { width, height, top, right, bottom, left, x, y } = boundingClientRectInfo
  const rawStylesStr = el.getAttribute('style')
  const rawStyles = rawStylesStr ? rawStylesStr.split(';').filter((item) => !!item && !item.includes(prefix)) : []
  const bindingStyles = [
    {
      name: 'width',
      value: width
    },
    {
      name: 'height',
      value: height
    },
    {
      name: 'top',
      value: top
    },
    {
      name: 'right',
      value: right
    },
    {
      name: 'bottom',
      value: bottom
    },
    {
      name: 'left',
      value: left
    },
    {
      name: 'x',
      value: x
    },
    {
      name: 'y',
      value: y
    }
  ].map((item) => `${prefix}${item.name}: ${item.value}px`)
  const newStyles = rawStyles.concat(bindingStyles)
  el.setAttribute('style', newStyles.join(';'))
}
const boundingInfoToCssVar: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    setStyles(el, binding.arg as IOptions)
  },
  updated(el: HTMLElement, binding: DirectiveBinding, vnode, prevVnode) {
    setStyles(el, binding.arg as IOptions)
  }
  // beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
  //   console.log(el)
  // }
}

export const name = 'BoundingInfoToCssVar'
export default boundingInfoToCssVar

使用方法

<div
  v-if="activated"
  v-bounding-info-to-css-var:[boundingInfoOptions]
  style="font-size: 12px"
  :style="styles"
  @click="closeHandle"
  class="overflow"
/>

<script lang="ts" setup>
const boundingInfoOptions = { prefix: '--bounding-info-' }
</script>

<style lang="less">
.overflow {
  height: calc(100vh - var(--bounding-info-top));
}
</style>

這是一個使用 Vue.js 實現的指令，它將元素的邊界信息轉換為 CSS 變量，并將這些 CSS 變量應用到元素的樣式上。

以下是代碼的詳細解釋：

setStyles函數用于設置元素的樣式。它接受一個元素和一個可選的配置對象作為參數。配置對象可以包含一個前綴選項，用于指定生成的 CSS 變量的前綴。

函數內部首先獲取元素的邊界信息，包括寬度、高度、上邊界、右邊界、下邊界、左邊界、水平偏移量和垂直偏移量。
然后，它從元素的現有樣式中提取出不包含指定前綴的樣式，并將其存儲在rawStyles數組中。
接下來，它根據邊界信息生成一組 CSS 變量，并將其存儲在bindingStyles數組中。每個 CSS 變量的名稱都以指定的前綴開頭，后面跟著對應的邊界信息名稱，值為邊界信息的值，單位為像素。
最后，它將原始樣式和生成的綁定樣式合并成一個新的樣式字符串，并將其設置回元素的style屬性中。

boundingInfoToCssVar指令用于將邊界信息轉換為 CSS 變量。它包含mounted和updated兩個生命周期鉤子函數。

mounted函數在指令首次綁定到元素時被調用，它調用setStyles函數來設置元素的樣式。
updated函數在指令的綁定值發(fā)生變化時被調用，它也調用setStyles函數來更新元素的樣式。

代碼最后導出了指令的名稱和定義，以便在其他地方使用。

使用這個指令時，可以在模板中使用v-bounding-info-css-var指令來綁定一個對象，該對象可以包含一個prefix選項，用于指定 CSS 變量的前綴。例如：

<!-- 此處的元素將具有帶有 --my-prefix- 前綴的 CSS 變量 -->
<div v-bounding-info-css-var="{ prefix: '--my-prefix-' }"></div>

這樣，元素的邊界信息將被轉換為帶有指定前綴的 CSS 變量，并應用到元素的樣式上。

這段代碼是一個使用 Vue.js 的示例，它包含一個具有條件渲染和一個自定義指令 v-bounding-info-to-css-var 的 <div> 元素。下面是代碼的詳細解釋：

<div
  v-if="activated"
  v-bounding-info-to-css-var:[boundingInfoOptions]
  style="font-size: 12px"
  :style="styles"
  @click="closeHandle"
  class="list"
 />

v-if="activated"：這是一個條件渲染指令，只有當 activated 變量的值為 true 時，這個 <div> 元素才會被渲染。
v-bounding-info-to-css-var:[boundingInfoOptions]：這是一個自定義指令，它接受一個參數 boundingInfoOptions，這個參數會被傳遞給指令的處理函數。
style="font-size: 12px"：這是一個內聯樣式，用于設置 <div> 元素的字體大小為 12px。
:style="styles"：這是一個 v-bind 指令，它將 styles 變量綁定到 <div> 元素的 style 屬性上。
@click="closeHandle"：這是一個事件監(jiān)聽指令，當點擊 <div> 元素時，會觸發(fā) closeHandle 函數。
class="list"：這是一個類名，用于給 <div> 元素添加一個名為 list 的類。

const boundingInfoOptions = { prefix: '--bounding-info-' }

boundingInfoOptions：這是一個對象，它包含了自定義指令 v-bounding-info-to-css-var 所需的參數。在這個例子中，prefix 是一個參數，它的值為 --bounding-info-。

.list { height: calc(100vh - var(--bounding-info-top)); }

.list：這是一個類選擇器，用于選擇具有 list 類的元素。

height: calc(100vh - var(--bounding-info-top));：這是一個 CSS 樣式聲明，它使用了 calc 函數來計算元素的高度。100vh 表示視窗的高度，var(--bounding-info-top) 表示一個變量，它的值是由自定義指令 v-bounding-info-to-css-var 設置的上邊界距離。通過減去上邊界的距離，得到了元素的高度。

總的來說，這段代碼的目的是在一個具有特定條件（activated 為 true）的情況下，渲染一個 <div> 元素。這個元素具有一些樣式，并且當點擊時會觸發(fā)一個函數。此外，它還使用了一個自定義指令來將元素的邊界信息轉換為 CSS 變量，并使用這些變量來設置元素的樣式。

到此這篇關于vue利用指令實現快速設置元素的高度的文章就介紹到這了,更多相關vue指令設置元素高度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: