From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001 From: doum <doum> Date: 星期五, 26 九月 2025 09:24:03 +0800 Subject: [PATCH] H5静态化 --- admin/src/components/common/ColumnDetail.vue | 124 +++++++++++++++++++++++++++++++++++++++++ 1 files changed, 124 insertions(+), 0 deletions(-) diff --git a/admin/src/components/common/ColumnDetail.vue b/admin/src/components/common/ColumnDetail.vue new file mode 100644 index 0000000..ec6cd40 --- /dev/null +++ b/admin/src/components/common/ColumnDetail.vue @@ -0,0 +1,124 @@ +<template> + <span v-if="content == null || 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> -- Gitblit v1.9.3