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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| <template>
| <span v-if="content.length <= limit">{{content}}</span>
| <el-popover
| v-else
| v-model="visible"
| popper-class="eva-column-detail-popover"
| trigger="click"
| >
| <div class="eva-column-detail">
| <pre class="eva-column-detail__main">{{formattedContent}}</pre>
| <div class="eva-column-detail__action">
| <el-button size="mini" @click="cancel">关闭</el-button>
| <el-button
| size="mini"
| type="primary"
| v-clipboard:copy="formattedContent"
| v-clipboard:success="copySuccess"
| v-clipboard:error="copyFailed"
| @click="confirm"
| >{{ confirmButtonText }}</el-button>
| </div>
| </div>
| <el-button slot="reference" :type="buttonType">查看</el-button>
| </el-popover>
| </template>
|
| <script>
| export default {
| name: 'ColumnDetail',
| props: {
| // 按钮类型
| buttonType: {
| type: String
| },
| // 内容
| content: {
| type: String,
| default: ''
| },
| // 限制，大于限制时展示查看按钮
| limit: {
| type: Number,
| default: 12
| },
| // 自动识别数据类型并格式化
| analyse: {
| type: Boolean,
| default: true
| },
| // 是否允许复制
| allowCopy: {
| type: Boolean,
| default: true
| }
| },
| data () {
| return {
| visible: false
| }
| },
| computed: {
| // 确认按钮文案
| confirmButtonText () {
| return this.allowCopy ? '复制' : '确定'
| },
| // 格式化后的内容
| formattedContent () {
| let content = this.content
| if (this.analyse) {
| try {
| content = JSON.stringify(JSON.parse(this.content), null, 2)
| } catch (e) {
| }
| }
| return content
| }
| },
| methods: {
| // 点击确认
| confirm () {
| this.visible = false
| this.$emit('confirm')
| },
| // 点击取消
| cancel () {
| this.visible = false
| this.$emit('cancel')
| },
| // 复制成功
| copySuccess () {
| this.$tip.success('复制成功')
| },
| // 复制失败
| copyFailed () {
| this.$tip.error('复制失败')
| }
| }
| }
| </script>
|
| <style lang="scss">
| .eva-column-detail-popover {
| max-width: 80%;
| }
| </style>
| <style scoped lang="scss">
| .eva-column-detail {
| .eva-column-detail__main {
| max-height: 500px;
| overflow: auto;
| }
| .eva-column-detail__action {
| text-align: right;
| }
| }
| </style>
|
|
