<vue-clamp>: легко реализовать усечение многострочного текста.

Vue.js
<vue-clamp>: легко реализовать усечение многострочного текста.

<vue-clamp>

Легко реализуйте усечение многострочного текста.

Гитхаб →

#Функция

  • Вы можете ограничить количество строк и/или максимальную высоту без указания высоты строки.
  • Поддерживает автоматические обновления при изменении макета.
  • Поддержка расширения/свертывания усеченной части контента.
  • Поддержка настраиваемого усеченного текста до и после содержимого, а также адаптивное обновление.

# Demo

максимальное количество строк ширина контейнера Vue (произносится как /vjuː/, похоже на view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других крупных фреймворков, Vue разработан так, чтобы его можно было применять слой за слоем снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. Другой… максимальная высота ширина контейнераРазвернуть содержимое Рекомендация Vue (произносится как /vjuː/, похоже на view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других крупных фреймворков, Vue разработан так, чтобы его можно было применять слой за слоем снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. С другой стороны, в сочетании с современными наборами инструментов и различными вспомогательными библиотеками Vue также полностью способен работать со сложными одностраничными приложениями.

#инструкции

$ npm i --save vue-clamp

Для проектов, основанных на веб-пакетах,importНетранспилированная версия модуля ES автоматически импортируется. Обязательно настройте соответствующие инструменты, как указано ниже.

Vue CLI v3

Для проектов, созданных с Vue CLI 3, убедитесь, что добавитьvue-clampа такжеresize-detectorПрисоединяйсяvue.config.jsдокументtranspileDependenciesСреди вариантов:

module.exports = {
  transpileDependencies: ['vue-clamp', 'resize-detector']
}

Vue CLI v2

Если вы используете Vue CLI 2webpackшаблон, пожалуйста, измените следующим образомbuild/webpack.base.conf.js:

      {
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-clamp'),
+         resolve('node_modules/resize-detector')
+       ]
      }

Nuxt.js v2

При использовании в Nuxt.js обязательно включитеvue-clampа такжеresize-detectorПрисоединяйсяnuxt.config.jsдокументbuild.transpileСреди вариантов:

module.exports = {
  build: {
    transpile: ['vue-clamp', 'resize-detector']
  }
}

<template>
<v-clamp autoresize :max-lines="3">{{ text }}</v-clamp>
</template>

<script>
import VClamp from 'vue-clamp'

export default {
  components: {
    VClamp
  },
  data () {
    return {
      text: 'Some very very long text content.'
    }
  }
}
</script>

# API

  • tag: string

    Имя тега сгенерированного корневого элемента.

    По умолчанию:div

  • autoresize: boolean

    Следует ли автоматически адаптироваться к изменению размера корневого элемента.

    По умолчанию:false

  • max-lines: number

    Максимальное количество отображаемых строк

  • max-height: number|string

    Максимальная высота корневого элемента. Числовое значение будет преобразовано вpxЕдиницы; строковые значения будут передаваться напрямую как свойства CSSmax-heightвыход.

  • ellipsis: string

    Строка многоточий, отображаемая при усечении текста.

    По умолчанию:'…'

  • expanded: boolean

    .sync

    Следует ли расширять явно усеченный текст.

    По умолчанию:false

  • default

    Текст, который нужно обрезать. Может содержать только текстовое содержимое.

  • before

    Объем слота:{ expand, collapse, toggle }

    expand: function(): void- Расширьте усеченный текст.

    collapse: function(): void- Свернуть развернутый текст.

    toggle: function(): void- переключение расширенного состояния текста усечено.

    Явный контент перед усеченным текстом может содержать любой тип контента.

  • after

    Объем слота: сbeforeтакой же.

    Явный контент после усеченного текста может содержать любой тип контента.

Категории