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
68
69
70
71
72
73
74
75
76
77
| <script>
| // const REG_LINK = /^\w+:\/\//;
| const REG_LINK =/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
| import { h } from "vue";
| export default {
| name: 'JsonString',
| props: {
| jsonValue: {
| type: String,
| required: true
| }
| },
| data() {
| return {
| expand: true,
| canExtend: false,
| }
| },
| mounted() {
| if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) {
| this.canExtend = true;
| }
| },
| methods: {
| toggle() {
| this.expand = !this.expand;
| }
| },
| render () {
| let value = this.jsonValue;
| const islink = REG_LINK.test(value)
| let domItem
|
| if (!this.expand) {
| domItem = {
| class: {
| 'jv-ellipsis': true,
| },
| onClick:this.toggle,
| innerText: '...'
| };
| } else {
| domItem = {
| class: {
| 'jv-item': true,
| 'jv-string': true,
| },
| ref: 'itemRef',
| }
| if (islink) {
| value = `<a href="${value}" target="_blank" class="jv-link">${value}</a>`;
| domItem.innerHTML=`"${value.toString()}"`
| } else {
| domItem.innerText=`"${value.toString()}"`
| }
| }
|
|
| return h('span', {}, [
| this.canExtend && h('span', {
| class: {
| 'jv-toggle': true,
| open: this.expand,
| },
| onClick:this.toggle,
| }),
| h('span', {
| class: {
| 'jv-holder-node': true,
| },
| ref: 'holderRef'
| }),
| h('span', domItem)
| ])
| }
| }
| </script>
|
|
