UFUse（1.6.2）

Appearance

On this page

vCompactFit ​

vCompactFit 指令可以将元素超出指定大小时缩小至指定大小。

使用 ​

vue
<script setup lang="ts">
import vCompactFit from 'ufuse/src/directives/vCompactFit'
</script>

<template>
  <div class="demo flex items-center">
    <span>|</span>
    <div class="w-[100px]">
      <!-- 将元素设置为非行内元素以便适用 transform，并根据实际业务需求调整 transform-origin -->
      <span v-compact-fit class="inline-block origin-left">1419501231.33</span>
    </div>
    <span>|</span>
    <div class="w-[100px] text-center">
      <!-- 如果元素宽度超出父元素宽度的 80%，则会被缩小至父元素宽度的 80% -->
      <span v-compact-fit="{ compactWidth: '80%' }" class="inline-block">1244444.33</span>
    </div>
    <span>|</span>
    <div class="w-[100px] text-center">
      <!-- 如果元素宽度超出 80px，则会被缩小至 80px -->
      <span v-compact-fit="{ compactWidth: 80 }" class="inline-block">1244444.33</span>
    </div>
    <span>|</span>
    <div class="w-[100px] text-center">
      <!-- 如果元素宽度没有超出，则什么都不做 -->
      <span v-compact-fit class="inline-block">12.33</span>
    </div>
    <span>|</span>
  </div>
</template>

预览 ​

API ​

ts
export interface vCompactFitOptions {
  /**
   * 展示的最大宽度，若实际内容超过这个宽度就会被缩小
   *
   * @example 150 具体的 px 值
   * @example '150px' 具体的 px 值
   * @example '80%' 相对于父元素宽度的百分比
   * @default '100%'
   */
  compactWidth?: number | string
}

贡献者 ​

cuijin
xieyuhang