2.0.1 • Published 1 year ago
vue-snip v2.0.1
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.
2.0.1
1 year ago
2.0.0
2 years ago
1.3.0
2 years ago
1.2.0
3 years ago
1.1.0
4 years ago
1.0.0
4 years ago
1.0.0-beta.11
4 years ago
1.0.0-beta.10
4 years ago
1.0.0-beta.9
4 years ago
1.0.0-beta.7
4 years ago
1.0.0-beta.8
4 years ago
1.0.0-beta.6
4 years ago
1.0.0-beta.4
4 years ago
1.0.0-beta.5
4 years ago
1.0.0-beta.3
4 years ago
1.0.0-beta.2
4 years ago
1.0.0-beta.1
4 years ago
1.0.0-beta.0
4 years ago
1.0.0-alpha.6
4 years ago
1.0.0-alpha.5
4 years ago
1.0.0-alpha.4
4 years ago
1.0.0-alpha.3
4 years ago
1.0.0-alpha.2
4 years ago
1.0.0-alpha.1
4 years ago
1.3.0-alpha
4 years ago