66 <el-button @click =" copy" >复制</el-button >
77 </div >
88 <el-tabs v-model =" activeName" >
9- <el-tab-pane :label = " key " :name = " key " v-for =" (item, key) in previewCode" :key =" key" >
10- <div class =" tab-info" :id = " key " ></ div >
9+ <el-tab-pane v-for =" (item, key) in previewCode" :key = " key " :label = " key " :name =" key" >
10+ <div :id = " key " class =" tab-info" / >
1111 </el-tab-pane >
1212 </el-tabs >
1313 </div >
1414</template >
1515
1616<script >
17- import marked from " marked" ;
18- import hljs from " highlight.js" ;
17+ import marked from ' marked'
18+ import hljs from ' highlight.js'
1919// import 'highlight.js/styles/atelier-cave-light.css';
20- import " highlight.js/styles/atelier-plateau-light.css" ;
20+ import ' highlight.js/styles/atelier-plateau-light.css'
2121export default {
2222 props: {
2323 previewCode: {
2424 type: Object ,
2525 default () {
26- return {};
27- },
28- },
26+ return {}
27+ }
28+ }
2929 },
3030 data () {
3131 return {
32- activeName: " " ,
33- };
34- },
35- methods: {
36- selectText () {
37- const element = document .getElementById (this .activeName );
38- if (document .body .createTextRange ) {
39- let range = document .body .createTextRange ();
40- range .moveToElementText (element);
41- range .select ();
42- } else if (window .getSelection ) {
43- let selection = window .getSelection ();
44- let range = document .createRange ();
45- range .selectNodeContents (element);
46- selection .removeAllRanges ();
47- selection .addRange (range);
48- } else {
49- alert (" none" );
50- }
51- },
52- copy () {
53- this .selectText ();
54- document .execCommand (" copy" );
55- this .$message .success (" 复制成功" );
56- },
32+ activeName: ' '
33+ }
5734 },
5835 mounted () {
5936 marked .setOptions ({
6037 renderer: new marked.Renderer (),
61- highlight : function (code ) {
62- return hljs .highlightAuto (code).value ;
38+ highlight : function (code ) {
39+ return hljs .highlightAuto (code).value
6340 },
6441 pedantic: false ,
6542 gfm: true ,
@@ -68,16 +45,39 @@ export default {
6845 sanitize: false ,
6946 smartLists: true ,
7047 smartypants: false ,
71- xhtml: false ,
72- });
48+ xhtml: false
49+ })
7350 for (const key in this .previewCode ) {
74- if (this .activeName == " " ) {
75- this .activeName = key;
51+ if (this .activeName === ' ' ) {
52+ this .activeName = key
7653 }
77- document .getElementById (key).innerHTML = marked (this .previewCode [key]);
54+ document .getElementById (key).innerHTML = marked (this .previewCode [key])
7855 }
7956 },
80- };
57+ methods: {
58+ selectText () {
59+ const element = document .getElementById (this .activeName )
60+ if (document .body .createTextRange ) {
61+ const range = document .body .createTextRange ()
62+ range .moveToElementText (element)
63+ range .select ()
64+ } else if (window .getSelection ) {
65+ const selection = window .getSelection ()
66+ const range = document .createRange ()
67+ range .selectNodeContents (element)
68+ selection .removeAllRanges ()
69+ selection .addRange (range)
70+ } else {
71+ alert (' none' )
72+ }
73+ },
74+ copy () {
75+ this .selectText ()
76+ document .execCommand (' copy' )
77+ this .$message .success (' 复制成功' )
78+ }
79+ }
80+ }
8181 </script >
8282
8383<style lang="scss">
0 commit comments