[O] Make post links clickable
This commit is contained in:
+17
-1
@@ -11,7 +11,7 @@
|
|||||||
<div class="img" v-for="i in p.images" :key="i"
|
<div class="img" v-for="i in p.images" :key="i"
|
||||||
:style="{'background-image': `url(${i.url})`, ...getImageStyle(p, i)}"></div>
|
:style="{'background-image': `url(${i.url})`, ...getImageStyle(p, i)}"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">{{p.text}}</div>
|
<div class="text" v-html="text"></div>
|
||||||
<div class="info font-code unselectable">
|
<div class="info font-code unselectable">
|
||||||
<div class="id">#{{p.id}}</div>
|
<div class="id">#{{p.id}}</div>
|
||||||
<div class="f-grow1"></div>
|
<div class="f-grow1"></div>
|
||||||
@@ -25,12 +25,19 @@
|
|||||||
import {Options, Vue} from 'vue-class-component';
|
import {Options, Vue} from 'vue-class-component';
|
||||||
import {Prop} from "vue-property-decorator";
|
import {Prop} from "vue-property-decorator";
|
||||||
import {Image, Post} from "@/views/Life.vue";
|
import {Image, Post} from "@/views/Life.vue";
|
||||||
|
import linkifyUrls from 'linkify-urls';
|
||||||
|
|
||||||
@Options({components: {}})
|
@Options({components: {}})
|
||||||
export default class PostView extends Vue
|
export default class PostView extends Vue
|
||||||
{
|
{
|
||||||
@Prop({required: true}) p!: Post
|
@Prop({required: true}) p!: Post
|
||||||
|
|
||||||
|
get text(): string | undefined
|
||||||
|
{
|
||||||
|
if (!this.p.text) return undefined
|
||||||
|
return linkifyUrls(this.p.text)
|
||||||
|
}
|
||||||
|
|
||||||
getImageStyle(post: Post, i: Image): unknown
|
getImageStyle(post: Post, i: Image): unknown
|
||||||
{
|
{
|
||||||
if (post.img_group_style)
|
if (post.img_group_style)
|
||||||
@@ -138,3 +145,12 @@ export default class PostView extends Vue
|
|||||||
font-size: 0.8em
|
font-size: 0.8em
|
||||||
margin-left: 4px
|
margin-left: 4px
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
@import "src/css/colors"
|
||||||
|
|
||||||
|
.post
|
||||||
|
a
|
||||||
|
color: $color-text-special
|
||||||
|
text-decoration: none
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user