vue uses directives to quickly set the height of elements

In projects, it is often necessary to set the height of the list to the height of the remaining visible area. The general approach is to use ref to obtain it, calculate the top of the element, and then passv-bind()Inject top into style

/api/#v-bind-in-css

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

The following is a method to quickly set the list height through instructions and css variables. The following is a code example.

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 = ()
  const { width, height, top, right, bottom, left, x, y } = boundingClientRectInfo
  const rawStylesStr = ('style')
  const rawStyles = rawStylesStr ? (';').filter((item) => !!item && !(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}${}: ${}px`)
  const newStyles = (bindingStyles)
  ('style', (';'))
}
const boundingInfoToCssVar: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    setStyles(el,  as IOptions)
  },
  updated(el: HTMLElement, binding: DirectiveBinding, vnode, prevVnode) {
    setStyles(el,  as IOptions)
  }
  // beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
  //   (el)
  // }
}

export const name = 'BoundingInfoToCssVar'
export default boundingInfoToCssVar

How to use

<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>

This is a directive implemented using , which converts the boundary information of elements into CSS variables and applies these CSS variables to the style of the element.

Here is a detailed explanation of the code:

setStylesFunctions are used to style elements. It accepts an element and an optional configuration object as parameters. The configuration object can contain a prefix option that specifies the prefix of the generated CSS variable.

The function first obtains the boundary information of the element, including width, height, upper boundary, right boundary, lower boundary, left boundary, horizontal offset and vertical offset.
It then extracts the style from the existing style of the element that does not contain the specified prefix and stores it inrawStylesin the array.
Next, it generates a set of CSS variables based on the boundary information and stores them inbindingStylesin the array. The name of each CSS variable begins with the specified prefix, followed by the corresponding boundary information name, the value is the value of the boundary information, and the unit is pixel.
Finally, it merges the original style and the generated binding style into a new style string and sets it back to the element'sstylein the attribute.

boundingInfoToCssVarDirectives are used to convert boundary information into CSS variables. It containsmountedandupdatedTwo life cycle hook functions.

mountedThe function is called when the instruction is first bound to an element, and it is calledsetStylesFunction to style elements.
updatedThe function is called when the binding value of the instruction changes, and it is also called.setStylesFunction to update the style of the element.

The code ends up exporting the name and definition of the directive for use elsewhere.

When using this directive, it can be used in the templatev-bounding-info-css-varDirective to bind an object that can contain aprefixOption to specify the prefix of the CSS variable. For example:

&lt;!-- The element here will have --my-prefix- Prefixed CSS variable --&gt;
&lt;div v-bounding-info-css-var="{ prefix: '--my-prefix-' }"&gt;&lt;/div&gt;

In this way, the boundary information of the element will be converted into a CSS variable with the specified prefix and applied to the element's style.

This code is an example of using it, which contains a conditional rendering and a custom directivev-bounding-info-to-css-varof<div>Elements. Here is a detailed explanation of the code:

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

v-if="activated": This is a conditional rendering instruction, only whenactivatedThe value of the variable istrueWhen this<div>The elements will be rendered.
v-bounding-info-to-css-var:[boundingInfoOptions]: This is a custom directive, which accepts a parameterboundingInfoOptions, this parameter will be passed to the instruction's processing function.
style="font-size: 12px": This is an inline style for setting<div>The font size of the element is12px。
:style="styles": This is a v-bind directive, which willstylesVariable binding to<div>ElementalstyleAttributes.
@click="closeHandle": This is an event listening instruction, when clicked<div>When elements are triggeredcloseHandleFunction.
class="list": This is a class name, used to give<div>Add an element namedlistClass of .

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

boundingInfoOptions: This is an object that contains custom directivesv-bounding-info-to-css-varRequired parameters. In this example,prefixis a parameter whose value is--bounding-info-。

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

.list: This is a class selector for selecting a class withlistElements of the class.

height: calc(100vh - var(--bounding-info-top));: This is a CSS style declaration, which usescalcFunctions to calculate the height of an element.100vhIndicates the height of the window,var(--bounding-info-top)Represents a variable whose value is made by a custom directivev-bounding-info-to-css-varSet upper boundary distance. By subtracting the distance from the upper boundary, the height of the element is obtained.

Overall, the purpose of this code is to have a specific condition (activatedfortrue) in case of rendering a<div>Elements. This element has some styles and a function is triggered when clicked. In addition, it uses a custom directive to convert the boundary information of an element into CSS variables and uses these variables to style the element.

This is the article about vue using instructions to quickly set the height of elements. For more related content on vue instructions, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!