1717</template >
1818
1919<script >
20- import dedent from ' dedent'
21- import { codemirror } from ' vue-codemirror'
22- // base style
23- import ' codemirror/lib/codemirror.css'
24- // theme css
25- import ' codemirror/theme/base16-dark.css'
26- // language
27- import ' codemirror/mode/vue/vue.js'
28- // active-line.js
29- import ' codemirror/addon/selection/active-line.js'
30- // styleSelectedText
31- import ' codemirror/addon/selection/mark-selection.js'
32- import ' codemirror/addon/search/searchcursor.js'
33- // highlightSelectionMatches
34- import ' codemirror/addon/scroll/annotatescrollbar.js'
35- import ' codemirror/addon/search/matchesonscrollbar.js'
36- import ' codemirror/addon/search/searchcursor.js'
37- import ' codemirror/addon/search/match-highlighter.js'
38- // keyMap
39- import ' codemirror/mode/clike/clike.js'
40- import ' codemirror/addon/edit/matchbrackets.js'
41- import ' codemirror/addon/comment/comment.js'
42- import ' codemirror/addon/dialog/dialog.js'
43- import ' codemirror/addon/dialog/dialog.css'
44- import ' codemirror/addon/search/searchcursor.js'
45- import ' codemirror/addon/search/search.js'
46- import ' codemirror/keymap/sublime.js'
47- // foldGutter
48- import ' codemirror/addon/fold/foldgutter.css'
49- import ' codemirror/addon/fold/brace-fold.js'
50- import ' codemirror/addon/fold/comment-fold.js'
51- import ' codemirror/addon/fold/foldcode.js'
52- import ' codemirror/addon/fold/foldgutter.js'
53- import ' codemirror/addon/fold/indent-fold.js'
54- import ' codemirror/addon/fold/markdown-fold.js'
55- import ' codemirror/addon/fold/xml-fold.js'
20+ import dedent from " dedent"
21+ import { codemirror } from " vue-codemirror"
22+ // base style
23+ import " codemirror/lib/codemirror.css"
24+ // theme css
25+ import " codemirror/theme/base16-dark.css"
26+ // language
27+ import " codemirror/mode/vue/vue.js"
28+ // active-line.js
29+ import " codemirror/addon/selection/active-line.js"
30+ // styleSelectedText
31+ import " codemirror/addon/selection/mark-selection.js"
32+ import " codemirror/addon/search/searchcursor.js"
33+ // highlightSelectionMatches
34+ import " codemirror/addon/scroll/annotatescrollbar.js"
35+ import " codemirror/addon/search/matchesonscrollbar.js"
36+ import " codemirror/addon/search/searchcursor.js"
37+ import " codemirror/addon/search/match-highlighter.js"
38+ // keyMap
39+ import " codemirror/mode/clike/clike.js"
40+ import " codemirror/addon/edit/matchbrackets.js"
41+ import " codemirror/addon/comment/comment.js"
42+ import " codemirror/addon/dialog/dialog.js"
43+ import " codemirror/addon/dialog/dialog.css"
44+ import " codemirror/addon/search/searchcursor.js"
45+ import " codemirror/addon/search/search.js"
46+ import " codemirror/keymap/sublime.js"
47+ // foldGutter
48+ import " codemirror/addon/fold/foldgutter.css"
49+ import " codemirror/addon/fold/brace-fold.js"
50+ import " codemirror/addon/fold/comment-fold.js"
51+ import " codemirror/addon/fold/foldcode.js"
52+ import " codemirror/addon/fold/foldgutter.js"
53+ import " codemirror/addon/fold/indent-fold.js"
54+ import " codemirror/addon/fold/markdown-fold.js"
55+ import " codemirror/addon/fold/xml-fold.js"
56+
57+ import exampleJson from " ./example.js"
5658
5759export default {
5860 components: {
5961 codemirror
6062 },
6163 name: " Run"
62- props: {},
64+ props: {
65+ type: String
66+ },
6367 computed: {
6468 codemirror () {
6569 return this .$refs .cmEditor .codemirror ;
6670 }
6771 },
6872 data () {
6973 return {
70- code: `
71- <!DOCTYPE html>
72- <html>
73- <head>
74- <meta charset="utf-8">
75- <title>Vue 测试实例</title>
76- <script src="https://doc.vue-js.com/js/vue.js">${ ' <\/ script>' }
77- </head>
78- <body>
79- <div id="app">
80- <p>{{ message }}</p>
81- </div>
82- <script>
83- new Vue({
84- el: '#app',
85- data: {
86- message: 'Hello Vue.js!'
87- }
88- })
89- ${ ' <\/ script>' }
90- </body>
91- </html>
92- ` ,
93- cmOption: {
94- tabSize: 4 ,
95- foldGutter: true ,
96- styleActiveLine: true ,
97- lineNumbers: true ,
98- line: true ,
99- keyMap: " sublime"
100- mode: ' text/html'
101- htmlMode: true ,
102- theme: ' base16-dark'
103- }
74+ code: exampleJson[this .type ],
75+ cmOption: {
76+ tabSize: 4 ,
77+ foldGutter: true ,
78+ styleActiveLine: true ,
79+ lineNumbers: true ,
80+ line: true ,
81+ keyMap: " sublime"
82+ mode: " text/html"
83+ htmlMode: true ,
84+ theme: " base16-dark"
85+ }
10486 };
10587 },
10688 mounted () {
107- this .run ()
89+ this .run ();
10890 },
10991 methods: {
11092 run () {
@@ -179,10 +161,11 @@ ${'<\/script>'}
179161 border none ;
180162}
181163.example {
182- height 70vh ;
164+ /* height: 70vh;*/
183165}
184166.codemirror ,
185167.result {
168+ height 400px ;
186169 margin 0 ;
187170 overflow auto ;
188171 padding-top 0 ;
@@ -198,7 +181,13 @@ ${'<\/script>'}
198181 word-wrap break-word ;
199182 border-radius 8px ;
200183}
201- .result h3 {
184+ .result h3 {
202185 margin 0 ;
203186}
187+
188+ #iframe ,
189+ iframe {
190+ width 100% ;
191+ height 100% ;
192+ }
204193</style >
0 commit comments