vue3-truncate-html

Language: 🇷🇺 Русский | 🇺🇸 English

Простой Vue 3 компонент для обрезки HTML-текста с возможностью развернуть/свернуть содержимое.

Подробная документация здесь.

📚 Документация

• 🧪 Тестирование библиотеки - полное руководство по тестированию перед публикацией
• 🚀 Процесс релиза - автоматизированный процесс создания релизов
• 🛡️ Защита веток - настройка обязательных проверок для PR

Установка

npm i vue3-truncate-html

или

yarn add vue3-truncate-html

или

pnpm add vue3-truncate-html

Пример использования

<template>
  <div class="vue-truncate-html-example">
    <div class="vue-truncate-html-example__container">
      <h3>Обрезка обычного текста</h3>
      <vue-truncate-html
        v-model="isTruncated"
        :text="text" />
    </div>
    <div class="vue-truncate-html-example__container">
      <h3>Обрезка HTML-разметки</h3>
      <vue-truncate-html
        v-model="isTruncated2"
        type="html"
        :text="html" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { VueTruncateHtml } from 'vue3-truncate-html';

export default {
  name: 'VueTruncateHtmlExample',
  components: {
    VueTruncateHtml,
  },
  setup() {
    const isTruncated = ref(true);
    const isTruncated2 = ref(true);

    const text = `
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Adipisci animi autem beatae consequuntur debitis delectus deleniti ducimus enim,
      facere hic id impedit labore laboriosam magni molestiae nemo non numquam officiis porro,
      quibusdam tempora totam vel voluptate voluptatem voluptatum. Ad adipisci architecto,
      beatae blanditiis corporis cumque dolor, eaque excepturi exercitationem magnam nihil optio perferendis perspiciatis qui quis,
      `;

    const html = `
      <b>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</b>
      <ul>
        <li>
            <a href="https://google.com">Google.com</a>
            Adipisci animi autem beatae consequuntur debitis delectus deleniti ducimus enim,
        </li>
        <li>facere hic id impedit labore laboriosam magni molestiae nemo non numquam officiis porro,</li>
        <li>quibusdam tempora totam vel voluptate voluptatem voluptatum. Ad adipisci architecto,</li>
      </ul>
      <i>beatae blanditiis corporis cumque dolor</i>, eaque excepturi exercitationem magnam nihil optio perferendis perspiciatis qui quis,
    `;

    return {
      isTruncated, isTruncated2, text, html,
    };
  },
};
</script>

<style scoped>
.vue-truncate-html-example__container {
  padding: 15px;
  background-color: #f3f5f7;
  margin-bottom: 30px;
}
</style>

## Основные возможности

- ✅ **Обрезка текста и HTML** - поддержка обычного текста и HTML-разметки
- ✅ **Реактивность** - использует v-model для управления состоянием
- ✅ **Безопасность** - санитизация HTML для предотвращения XSS
- ✅ **TypeScript** - полная поддержка TypeScript
- ✅ **Легковесность** - минимальные зависимости
- ✅ **Настраиваемость** - множество опций для кастомизации

## API

### Props

| Prop | Тип | По умолчанию | Описание |
|------|-----|-------------|----------|
| `text` | `string` | `''` | Текст для обрезки |
| `type` | `'text' \| 'html'` | `'text'` | Тип контента |
| `length` | `number` | `100` | Максимальная длина |
| `clamp` | `string` | `'...'` | Символы для обрезки |

### Events

| Event | Тип | Описание |
|-------|-----|----------|
| `update:modelValue` | `(value: boolean) => void` | Изменение состояния развернуто/свернуто |

## Разработка

```bash
# Установка зависимостей
pnpm install

# Запуск тестов
pnpm test

# Линтинг
pnpm lint

# Проверка типов
pnpm typecheck

# Сборка библиотеки
pnpm build:library

Лицензия

MIT © Ivan Monastyrev