Skip to content

Commit b1f558f

Browse files
author
febobo
committed
add nexttick doc
1 parent 5c7fbef commit b1f558f

File tree

20 files changed

+1437
-88
lines changed

20 files changed

+1437
-88
lines changed

‎docs/.vuepress/components/Run.vue‎

Lines changed: 63 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -17,94 +17,76 @@
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
5759
export 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

Comments
 (0)