# auto-to-more

> 元素溢出传送

Latest version **1.0.5** (published 2023-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install auto-to-more
pnpm add auto-to-more
yarn add auto-to-more
bun add auto-to-more
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-12-18 |
| First published | 2023-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Huang Haixin |
| Maintainers | huanghaix |
| Keywords | auto-to-more, AutoToMore, auto, overflow, more, vue, vite, component |

## Links

- npm: https://www.npmjs.com/package/auto-to-more
- Repository: https://github.com/JCheng-Haixin/auto-to-more
- Homepage: https://github.com/JCheng-Haixin/auto-to-more#readme
- Issues: https://github.com/JCheng-Haixin/auto-to-more/issues
- npm.io page: https://npm.io/package/auto-to-more

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-12-18
- 1.0.4 — 2023-12-05
- 1.0.3 — 2023-12-04
- 1.0.2 — 2023-11-30
- 1.0.1 — 2023-11-30
- 1.0.0 — 2023-11-29

## README

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

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

# 安装
```
npm i auto-to-more
```

# 使用
```html
<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` 属性可进行透传

---
_Source: https://npm.io/package/auto-to-more · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._