render-remark.vue
1.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
<view class="render-remark" :class="[`render-remark--${align}`]">
<view class="render-remark__content">{{ content }}</view>
<view class="render-remark__tags">
<template v-for="(tag, index) in tags">
<view class="tag-item">
<u-tag :key="index" :text="tag" plain plain-fill shape="circle" size="mini" />
</view>
</template>
</view>
</view>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
props: {
value: String,
align: {
type: String,
default: 'left', // right, left
}
},
computed: {
...mapGetters(['dictList']),
remarkArr() {
return `${this.value || ''}`.split(';');
},
content() {
return this.remarkArr[0] || '';
},
tags() {
const tagStr = this.remarkArr[1] || '';
return tagStr.split(',').filter(i => i);
}
},
}
</script>
<style lang="scss">
.render-remark {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
word-break: break-all;
&__tags {
display: flex;
flex-wrap: wrap;
margin-top: $padding-xs;
.tag-item {
margin-bottom: $padding-xs;
margin-right: $padding-xs;
}
}
&--right {
align-items: flex-end;
justify-content: flex-end;
.tag-item {
margin-bottom: $padding-xs;
margin-left: $padding-xs;
margin-right: auto;
}
}
}
</style>