vue-admin-beautiful/src/views/vab/codeGenerator/components/TableExhibitionQuery.vue

<template>
  <div class="table-query">
    <div>
      <el-button type="primary" @click="openCodeDialog">查看代码</el-button>
      <el-button type="primary" @click="handleClipboard(srcTableCode, $event)">
        复制代码
      </el-button>
    </div>
    <el-dialog destroy-on-close title="查看代码" :visible.sync="dialogVisible">
      <textarea v-show="false" ref="code" v-model="srcTableCode"></textarea>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="closeCodeDialog(srcTableCode, $event)"
        >
          复制代码
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import clipboard from "@/utils/clipboard";
  import CodeMirror from "codemirror";

  export default {
    props: {
      headers: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
      };
    },
    computed: {
      ...mapGetters({ srcTableCode: "table/srcTableCode" }),
    },
    methods: {
      handleClipboard(text, event) {
        clipboard(text, event);
      },
      openCodeDialog() {
        this.dialogVisible = true;
        setTimeout(() => {
          CodeMirror.fromTextArea(this.$refs.code, {
            lineNumbers: true,
            gutters: ["CodeMirror-lint-markers"],
            theme: "rubyblue",
            autoRefresh: true,
            lint: true,
          });
        }, 0);
      },
      closeCodeDialog(text, event) {
        this.handleClipboard(text, event);
        this.dialogVisible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .table-query {
    display: flex;
    justify-content: flex-end;
    height: 45px;

    ::v-deep {
      .CodeMirror {
        height: auto;
        min-height: calc(100vh - 420px);
      }
    }
  }
</style>