Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple View more / Read more directive for vuejs based on number of lines. Add v-viewmore="MAXIMUM_LINES_T0_SHOW" to content div. Demo : https://codepen.io/dagalti/pen/vPOZaB
/* How to Use?
1. Add v-viewmore to content div.
2.Add CSS to the component.
3. Javascript
import { viewmore } from 'vue-viewmore-directive.js'
export default {
name: 'Yourcomponent',
data () {},
directives:{viewmore},
} */
/* JAVASCIRPT */
export const viewmore = {
inserted: function (el, binding){
let maxlines = binding.value
let lineheight = parseFloat(getComputedStyle(el).lineHeight)
let paddingtop = parseFloat(getComputedStyle(el).paddingTop)
let lines = (el.clientHeight) / lineheight ;
let maxheight = (lineheight * maxlines) + paddingtop
if(lines>maxlines){
el.classList.add('more')
el.style.maxHeight = maxheight + 'px'
el.addEventListener('click', handler = ()=> {
el.style.maxHeight = ""
el.scrollIntoView({behavior: "smooth"})
el.removeEventListener('click', handler)
el.classList.remove('more')
})
}
},
unbind: function (el, binding) {
el.removeEventListener('click', handler)
handler = ""
}
}
/* CSS */
.more{
position: relative;
overflow: hidden;
}
.more::after{
content:"View more...";
display: block;
cursor:pointer;
position: absolute;
bottom: 5px;
right: 3px;
font-size: 12px;
background: lightgreen;
padding: 3px 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.