CP-VueDir

Appearance

v-autobox 指令 ​

介绍 ​

v-autobox 指令用于自动调整容器尺寸以完美适应子元素内容。它会动态计算子元素的 最大宽度 和 总高度，并自动考虑边距（margin）、边框（border）、填充（padding）等布局因素，适用于动态内容容器、自适应卡片等场景。

基础用法 ​

种树者必培其根，种德者必养其心。| 身之主宰便是心，心之所发便是意，意之本体便是知，意之所在便是物| 无善无恶心之体，有善有恶意之动，知善知恶是良知，为善去恶是格物| 知者行之始，行者知之成

破山中贼易，破心中贼难

查看代码
vue
<template>
  <div v-autobox>
    <div class="demo-box1">
      <p>
        种树者必培其根，种德者必养其心。| 身之主宰便是心，心之所发便是意，意之本体便是知，意之所在便是物|
        无善无恶心之体，有善有恶意之动，知善知恶是良知，为善去恶是格物| 知者行之始，行者知之成
      </p>
    </div>

    <div class="demo-box2">
      <p>破山中贼易，破心中贼难</p>
      <img src="../../../public/directives/autobox/wangyangming.png" alt="" />
    </div>
  </div>
</template>
<script setup></script>
<style scoped>
div {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

扩展用法 ​

可以设置多个参数，来达到自定义效果:

破山中贼易，破心中贼难

也许你感觉自己的努力总是徒劳无功，但不必怀疑，你每天都离顶点更进一步。今天的你离顶点还遥遥无期。但你通过今天的努力，积蓄了明天勇攀高峰的力量

查看代码
vue
<template>
  <div class="demo-container">
    <div v-autobox="{ selector: 'p', maxWidth: '30vw' }">
      <p>破山中贼易，破心中贼难</p>
      <p>
        也许你感觉自己的努力总是徒劳无功，但不必怀疑，你每天都离顶点更进一步。今天的你离顶点还遥遥无期。但你通过今天的努力，积蓄了明天勇攀高峰的力量
      </p>
      <img src="../../../public/directives/autobox/wangyangming.png" alt="" />
    </div>
  </div>
</template>
<script setup></script>
<style scoped>
* {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}

.demo-container {
  height: 800px;
}
</style>

API ​

属性名说明类型是否必选默认值
selector
选择器，用于指定需要自动调整尺寸的容器
string
○
*(全部)
maxWidth
容器的最大宽度，默认为 100vw
string
○
100vw

注意事项 ​

WARNING

  1. 目标元素

    • 必须为 无子元素 的叶子节点
    • 用于 vue 组件可能会有问题

  2. 参数规范

    • selector 避免通配符 *
    • maxWidth 默认 100vw 可能导致溢出

  3. 样式覆盖

    • 父元素会被强制设置 box-sizing: border-box
    • 若需 white-space: nowrap 需手动覆盖

  4. 动态内容

    • 异步加载后需用 key 强制刷新
    • 用 v-if 控制显隐，而非 v-show

  5. 浏览器兼容

    • 不支持 IE/旧浏览器（需 ResizeObserver polyfill）

  6. 性能风险

    • 子元素超过 50 个时谨慎使用

  7. 边距陷阱

    • 父元素有 padding/border 时计算可能异常
    • 相邻元素 margin 折叠需手动验证