vue-snip
vue-snip
Vue.js directive that clamps the content of a text element if it exceeds the specified number of lines.
Key features:
- two snipping approaches (CSS / JavaScript) picked on a per-element basis
- no need to specify line heights
- re-snipping on element resize and reactive data change
To get a hands-on experience try the Interactive Demo.
Installation
# install with npm
npm install vue-snip
# or with yarn
yarn add vue-snip
Vue 2
import Vue from 'vue'
import VueSnip from 'vue-snip'
import App from './App'
Vue.use(VueSnip)
new Vue({ render: h => h(App) }).$mount('#app')
Vue 3
import { createApp } from 'vue'
import VueSnip from 'vue-snip'
import App from './App'
createApp(App).use(VueSnip).mount('#app')
Usage
<!-- minimal example -->
<template>
<p v-snip> ... </p>
</template>
<!-- with options -->
<template>
<p v-snip="{ lines: 3 }"> ... </p>
</template>
<!-- with several options -->
<template>
<p v-snip="{ lines: 3, mode: 'js', midWord: false }"> ... </p>
</template>
<!-- with options and callback -->
<template>
<p v-snip="{ lines: 3, onSnipped }"> ... </p>
</template>
<script>
export default {
data () {
return {
hasEllipsis: false,
}
},
methods: {
onSnipped (newState) {
this.hasEllipsis = newState.hasEllipsis
}
}
}
</script>
How it works
The library uses js-snip under the hood. You can find more about the options and how snipping works in its documentation.
Change Log
All changes are documented in the change log.
Dependencies
Dependencies
@babel/core: ^7.0.0@babel/preset-env: ^7.16.4@babel/preset-typescript: ^7.16.0@cypress/code-coverage: ^3.8.1@istanbuljs/nyc-config-typescript: ^1.0.1@rollup/plugin-babel: ^5.3.0@rollup/plugin-node-resolve: ^13.0.6@typescript-eslint/eslint-plugin: ^5.4.0@typescript-eslint/parser: ^5.4.0cypress: ^12.5.1es-check: ^6.1.1eslint: ^7.32.0eslint-config-prettier: ^8.3.0eslint-config-standard: ^16.0.3eslint-plugin-cypress: ^2.11.1eslint-plugin-import: ^2.20.2eslint-plugin-node: ^11.1.0eslint-plugin-prettier: ^4.0.0eslint-plugin-promise: ^5.1.1eslint-plugin-standard: ^5.0.0prettier: ^2.5.1rollup: ^2.60.1rollup-plugin-dts: ^4.0.1rollup-plugin-serve: ^1.1.0rollup-plugin-terser: ^7.0.2typescript: ^4.5.2vue: ^3.2.23