mirror of https://github.com/pixelfed/pixelfed.git
52 lines
1.0 KiB
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>
|