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	Изменение состояния развернуто/свернуто

Разработка

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

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

# Запуск тестов производительности
pnpm run test:performance

# Тесты с покрытием кода
pnpm run test:coverage

# Линтинг
pnpm lint

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

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

Тестирование производительности

Проект включает систему тестирования производительности для мониторинга скорости работы компонента:

• pnpm run test:performance - запуск тестов производительности
• pnpm run test:performance:quiet - тихий режим
• pnpm run test:performance:report - детальный отчет

Подробная документация: docs/performance-testing.md

Лицензия

MIT © Ivan Monastyrev