feat: 给所有 md 文件生成的文档添加代码复制按钮

Author: HouLiXieBuRou

src/components/AppMarkdown.vue

@@ -5,9 +5,12 @@
 import { ref } from 'vue';
 import CategorySecond from '../../components/CategorySecond.vue';
 import { useRoute, useProps } from 'vue-router';
-import { setTitle } from '../../utils/utils.js';
-import { requestGetJson } from '../utils/utils.js';
-import { requestToYaml } from '../utils/utils.js';
+import {
+  setTitle,
+  requestGetJson,
+  requestToYaml,
+  handleCopyCodeSuccess
+} from '../../utils/utils.js';
 
 const props = useProps(['mdPath']);
 
@@ -32,7 +35,7 @@ const newsDate = ref('');
       :title="yamlDoc['title']"
       :right-text="newsDate"
       class="absolute w-[calc(59.5vw-1px)]" />
-    <v-md-preview :text="mdRes" class="pt-[50px]"></v-md-preview>
+    <v-md-preview :text="mdRes" class="pt-[50px]" @copy-code-success="handleCopyCodeSuccess" />
   </div>
 </template>
 

src/main.js

@@ -9,6 +9,8 @@ import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor';
 import VMdPreview from '@kangc/v-md-editor/lib/preview';
 import '@kangc/v-md-editor/lib/style/preview.css';
 import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
+import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
+import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
 import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
 import './css/index.scss';
 import './css/element-plus.scss';
@@ -47,6 +49,9 @@ VMdPreview.use(vuepressTheme, {
   Prism
 });
 
+// copy code
+VMdPreview.use(createCopyCodePlugin());
+
 // highlightjs
 import 'highlight.js/styles/stackoverflow-light.css';
 // import hljs from 'highlight.js/lib/core';

src/pages/mdView/MdView.vue

@@ -2,8 +2,12 @@
 import { ref } from 'vue';
 import CategorySecond from '../../components/CategorySecond.vue';
 import { useRoute } from 'vue-router';
-import { setTitle } from '../../utils/utils.js';
-import { requestToYaml, requestGetJson } from '../../utils/utils.js';
+import {
+  setTitle,
+  requestToYaml,
+  requestGetJson,
+  handleCopyCodeSuccess
+} from '../../utils/utils.js';
 
 const mdRes = ref();
 const route = useRoute();
@@ -28,7 +32,7 @@ const newsDate = ref('');
       :title="yamlDoc['title']"
       :right-text="newsDate"
       class="absolute w-[calc(59.5vw-1px)]" />
-    <v-md-preview :text="mdRes"></v-md-preview>
+    <v-md-preview :text="mdRes" @copy-code-success="handleCopyCodeSuccess" />
   </div>
 </template>
 

src/pages/news/NewsDetail.vue

@@ -2,8 +2,12 @@
 import { ref } from 'vue';
 import CategorySecond from '../../components/CategorySecond.vue';
 import { useRoute } from 'vue-router';
-import { setTitle } from '../../utils/utils.js';
-import { requestGetJson, requestToYaml } from '../../utils/utils.js';
+import {
+  setTitle,
+  requestGetJson,
+  requestToYaml,
+  handleCopyCodeSuccess
+} from '../../utils/utils.js';
 
 const mdRes = ref();
 const route = useRoute();
@@ -29,7 +33,7 @@ const newsDate = ref('');
       :title="yamlDoc['title']"
       :right-text="newsDate"
       class="sticky top-0 z-1" />
-    <v-md-preview :text="mdRes"></v-md-preview>
+    <v-md-preview :text="mdRes" @copy-code-success="handleCopyCodeSuccess" />
   </div>
 </template>
 

src/utils/utils.js

@@ -140,3 +140,7 @@ export const useHighlightWatch = (switchHash) => {
     switchHash();
   });
 };
+
+export const handleCopyCodeSuccess = () => {
+  ElMessage.success('复制成功');
+};