pixelfed/resources/assets/components/groups/partials/ReadMore.vue

52 lines
1.0 KiB
Vue

<template>
<div class="read-more-component" style="word-break: break-all;">
<div v-if="status.content.length < 200" v-html="content"></div>
<div v-else>
<span v-html="content"></span>
<a
v-if="cursor == 200 || fullContent.length > cursor"
class="font-weight-bold text-muted" href="#"
style="display: block;white-space: nowrap;"
@click.prevent="readMore">
<i class="d-none fas fa-caret-down"></i> Read more...
</a>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: {
status: {
type: Object
},
cursorLimit: {
type: Number,
default: 200
}
},
data() {
return {
fullContent: null,
content: null,
cursor: 200
}
},
mounted() {
this.cursor = this.cursorLimit;
this.fullContent = this.status.content;
this.content = this.status.content.substr(0, this.cursor);
},
methods: {
readMore() {
this.cursor = this.cursor + 200;
this.content = this.fullContent.substr(0, this.cursor);
}
}
}
</script>