vue3-truncate-html

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

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

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

Быстрый старт

Установка

npm install vue3-truncate-html

или

yarn add vue3-truncate-html

или

pnpm add vue3-truncate-html

Базовое использование

<template>
  <vue-truncate-html
    v-model="isTruncated"
    :text="text"
    :length="100" />
</template>

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

const isTruncated = ref(true)
const text = 'Очень длинный текст, который нужно обрезать...'
</script>

Примеры

Простой текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi autem beatae consectetur co

HTML содержимое

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <ul> <li>Первый пункт списка</li> <li>Второй

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

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

Поддержка

• 🐛 Сообщить об ошибке
• 💡 Предложить улучшение
• 📦 NPM пакет

Лицензия

MIT © Ivan Monastyrev