auto-to-more

一个基于 Vue3 Teleport 实现的溢出传送组件。例子：当一个元素中拥有多个元素，又不需要全部展示时，可将多余的元素隐藏至指定位置，再通过指定的元素与触发条件来展示这些被暂时隐藏的元素。

效果

默认最多展示3个元素。当超出3个时，从第3个元素开始会被隐藏至 OverflowContent 中，OverflowContent 从 overflow-content 插槽中获取。在使用时可自定义 OverflowContent 的位置，以及其展示触发控件。

安装

npm i auto-to-more

使用

<script setup lang="ts">
  import { AutoOverflow, AutoOverflowChild } from 'auto-to-more';
</script>

<template>
  <!-- max-count(number) 默认最大展示个数 3 -->
  <AutoOverflow :max-count="3">
    <AutoOverflowChild>
      <button>1</button>
    </AutoOverflowChild>
    <AutoOverflowChild>
      <button>2</button>
    </AutoOverflowChild>
    <AutoOverflowChild>
      <button>3</button>
    </AutoOverflowChild>
    <AutoOverflowChild>
      <button>4</button>
    </AutoOverflowChild>
    <AutoOverflowChild>
      <button>5</button>
    </AutoOverflowChild>
    
    <template #overflow-content="{ OverflowContent }">
      <!-- 
        OverflowContent 的 tag 默认为 div，默认 class 为 overflow-box：
        <div class="overflow-box"><slot /></div>
      -->
      <component :is="OverflowContent" tag="div"></component>
    </template>
  </AutoOverflow>
</template>

AutoToMore API

AutoOverflow Attributes

属性名	说明	类型	默认值
max-count	子元素最大展示个数	number	3

AutoOverflow Slots

插槽名	说明
default	自定义默认内容
overflow-content	溢出内容被传送的目标

OverflowContent Attributes

属性名	说明	类型	默认值
tag	组件的标签	string	div

OverflowContent 属性可进行透传