init

src/components/Code.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-dialog title="代码预览" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
+    :center=true>
+    <pre style="max-height: 60vh;">
+    <code v-html="formatCode"></code>
+    </pre>
+    <div>
+      <center style="color: #666; font-size: 12px;">使用代码前请确认相应的组件库已集成至项目</center>
+    </div>
+    <span slot="footer">
+
+      <el-tooltip effect="dark" content="拷贝" placement="left">
+        <img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
+      </el-tooltip>
+      <el-tooltip effect="dark" content="下载" placement="right">
+        <img class="round-icon" :src="iconDownload" alt="" @click="download">
+      </el-tooltip>
+
+    </span>
+  </el-dialog>
+
+</template>
+
+<script>
+import './prism.css'
+import Prism from "prismjs";
+import prettier from "prettier/standalone";
+import parserHtml from "prettier/parser-html";
+import copy from 'copy-to-clipboard';
+import { saveAs } from "file-saver";
+
+export default {
+  props: ['rawCode', 'codeDialogVisible'],
+
+  data() {
+    return {
+      // 在此自动生成
+
+      iconCopy: require("@/assets/icon/copy-outline.svg"),
+      iconDownload: require("@/assets/icon/code-download-outline.svg"),
+    };
+  },
+  beforeCreate() { },
+  created() { },
+  beforeMount() { },
+  mounted() { },
+  beforeUpdate() { },
+  updated() { },
+  destoryed() { },
+  methods: {
+    // 在此自动生成
+    request() {
+      // 网络请求，可选
+    },
+    handleClose() {
+      this.$emit("update:codeDialogVisible", false);
+    },
+    copyCheck() {
+      this.copy();
+    },
+    copy() {
+      if (copy(this.prettyCode)) {
+        this.$message.success("代码已复制到剪贴板");
+      } else {
+        this.$message.error("代码复制有点问题?");
+      }
+    },
+    download() {
+      window.trackManager.track("lc_on_code_download");
+      let blob = new Blob([this.prettyCode], {
+        type: "text/plain;charset=utf-8",
+      });
+      saveAs(blob, "VueComponent.vue");
+    },
+
+  },
+  watch: {
+    codeDialogVisible(newValue) {
+      if (newValue) {
+
+      } else {
+
+      }
+    }
+  },
+  computed: {
+    prettyCode() {
+      return prettier.format(this.rawCode, {
+        parser: "html",
+        plugins: [parserHtml],
+        vueIndentScriptAndStyle: true,
+      });
+    },
+
+    formatCode() {
+      // 代码格式化工具需要赓续为支持Vue的，当前prettier对js代码不够友好
+      return Prism.highlight(this.prettyCode, Prism.languages.markup, "html");
+    }
+  },
+  fillter: {},
+};
+</script>
+
+<style scoped>
+/*  在此自动生成 */
+
+::v-deep .el-dialog__body {
+  padding: 0 30px !important;
+}
+
+.round-icon {
+  background: #4dba87;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  padding: 10px;
+  margin-left: 10px;
+  box-sizing: border-box;
+}
+</style>