vue2-client 1.8.263 → 1.8.265

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,118 +1,118 @@
1
- <template>
2
- <codemirror
3
- v-model="item"
4
- :options="cmOption"
5
- class="code-mirror"
6
- :style="styleObj"
7
- @ready="onCmReady"
8
- @focus="onCmFocus"
9
- @input="onCmCodeChange"
10
- ref="myCmGenerate"></codemirror>
11
- </template>
12
-
13
- <script>
14
- import { codemirror } from 'vue-codemirror'
15
- import 'codemirror/mode/javascript/javascript.js'
16
- import './setting.js'
17
- // https://github.com/surmon-china/vue-codemirror/tree/v4.0.6
18
- export default {
19
- components: {
20
- codemirror
21
- },
22
- props: {
23
- value: {
24
- type: String,
25
- default: ''
26
- },
27
- readonly: {
28
- type: Boolean,
29
- default: false
30
- },
31
- mode: {
32
- type: String,
33
- default: 'sql' // 目前只有 sql/go/js 如果需要配置其他语言,需要在 setting.js 中配置 更多看官方文档
34
- },
35
- styleObj: {
36
- type: Object,
37
- default: () => {
38
- return { fontSize: '16px' }
39
- }
40
- },
41
- theme: {
42
- type: String,
43
- default: 'dracula'
44
- },
45
- },
46
- watch: {},
47
- data () {
48
- return {
49
- item: this.value,
50
- cmOption: {
51
- autoCloseBrackets: true,
52
- extraKeys: { Ctrl: 'autocomplete' },
53
- foldGutter: true,
54
- gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
55
- highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
56
- hintOptions: { completeSingle: false },
57
- keyMap: 'sublime',
58
- line: true,
59
- lineNumbers: true,
60
- matchBrackets: true,
61
- mode: { name: this.mode, json: true },
62
- readOnly: this.readonly ? 'nocursor' : undefined,
63
- showCursorWhenSelecting: true,
64
- styleActiveLine: true,
65
- styleSelectedText: true,
66
- tabSize: 2,
67
- theme: this.theme,
68
- }
69
- }
70
- },
71
- methods: {
72
- onCmReady () {
73
- },
74
- onCmFocus (instance, event) {
75
- // console.log(instance)
76
- // console.log(event)
77
- },
78
- onCmCodeChange (instance, _obj) {
79
- this.$emit('input', instance)
80
- // console.log(instance)
81
- // console.log(_obj)
82
- }
83
- }
84
- }
85
- </script>
86
- <style lang="less" scoped>
87
- .CodeMirror-scroll {
88
- overflow: scroll !important;
89
- margin-bottom: 0;
90
- margin-right: 0;
91
- padding-bottom: 0;
92
- height: 100%;
93
- outline: none;
94
- position: relative;
95
- border: 1px solid #dddddd;
96
- }
97
-
98
- @font-face {
99
- font-family: 'JetBrains Mono';
100
- src: url('@vue2-client/assets/ttf/JetBrainsMono-Light.woff2') format('woff2'), /* 字体文件路径和格式 */ url('@vue2-client/assets/ttf/JetBrainsMono-Light.woff2') format('woff');
101
- }
102
-
103
- :deep(.CodeMirror) {
104
- height: 100%;
105
- }
106
-
107
- .code-mirror {
108
- height: 100%;
109
- line-height: 150%;
110
- text-align: left;
111
- font-family: "JetBrains Mono", serif !important;
112
- }
113
-
114
- :deep(.CodeMirror-line), :deep(.CodeMirror-line-like) {
115
- font-family: "JetBrains Mono", serif !important;
116
- }
117
-
118
- </style>
1
+ <template>
2
+ <codemirror
3
+ v-model="item"
4
+ :options="cmOption"
5
+ class="code-mirror"
6
+ :style="styleObj"
7
+ @ready="onCmReady"
8
+ @focus="onCmFocus"
9
+ @input="onCmCodeChange"
10
+ ref="myCmGenerate"></codemirror>
11
+ </template>
12
+
13
+ <script>
14
+ import { codemirror } from 'vue-codemirror'
15
+ import 'codemirror/mode/javascript/javascript.js'
16
+ import './setting.js'
17
+ // https://github.com/surmon-china/vue-codemirror/tree/v4.0.6
18
+ export default {
19
+ components: {
20
+ codemirror
21
+ },
22
+ props: {
23
+ value: {
24
+ type: String,
25
+ default: ''
26
+ },
27
+ readonly: {
28
+ type: Boolean,
29
+ default: false
30
+ },
31
+ mode: {
32
+ type: String,
33
+ default: 'sql' // 目前只有 sql/go/js 如果需要配置其他语言,需要在 setting.js 中配置 更多看官方文档
34
+ },
35
+ styleObj: {
36
+ type: Object,
37
+ default: () => {
38
+ return { fontSize: '16px' }
39
+ }
40
+ },
41
+ theme: {
42
+ type: String,
43
+ default: 'dracula'
44
+ },
45
+ },
46
+ watch: {},
47
+ data () {
48
+ return {
49
+ item: this.value,
50
+ cmOption: {
51
+ autoCloseBrackets: true,
52
+ extraKeys: { Ctrl: 'autocomplete' },
53
+ foldGutter: true,
54
+ gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
55
+ highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
56
+ hintOptions: { completeSingle: false },
57
+ keyMap: 'sublime',
58
+ line: true,
59
+ lineNumbers: true,
60
+ matchBrackets: true,
61
+ mode: { name: this.mode, json: true },
62
+ readOnly: this.readonly ? 'nocursor' : undefined,
63
+ showCursorWhenSelecting: true,
64
+ styleActiveLine: true,
65
+ styleSelectedText: true,
66
+ tabSize: 2,
67
+ theme: this.theme,
68
+ }
69
+ }
70
+ },
71
+ methods: {
72
+ onCmReady () {
73
+ },
74
+ onCmFocus (instance, event) {
75
+ // console.log(instance)
76
+ // console.log(event)
77
+ },
78
+ onCmCodeChange (instance, _obj) {
79
+ this.$emit('input', instance)
80
+ // console.log(instance)
81
+ // console.log(_obj)
82
+ }
83
+ }
84
+ }
85
+ </script>
86
+ <style lang="less" scoped>
87
+ .CodeMirror-scroll {
88
+ overflow: scroll !important;
89
+ margin-bottom: 0;
90
+ margin-right: 0;
91
+ padding-bottom: 0;
92
+ height: 100%;
93
+ outline: none;
94
+ position: relative;
95
+ border: 1px solid #dddddd;
96
+ }
97
+
98
+ @font-face {
99
+ font-family: 'JetBrains Mono';
100
+ src: url('@vue2-client/assets/ttf/JetBrainsMono-Light.woff2') format('woff2'), /* 字体文件路径和格式 */ url('@vue2-client/assets/ttf/JetBrainsMono-Light.woff2') format('woff');
101
+ }
102
+
103
+ :deep(.CodeMirror) {
104
+ height: 100%;
105
+ }
106
+
107
+ .code-mirror {
108
+ height: 100%;
109
+ line-height: 150%;
110
+ text-align: left;
111
+ font-family: "JetBrains Mono", serif !important;
112
+ }
113
+
114
+ :deep(.CodeMirror-line), :deep(.CodeMirror-line-like) {
115
+ font-family: "JetBrains Mono", serif !important;
116
+ }
117
+
118
+ </style>
@@ -1,40 +1,40 @@
1
- import 'codemirror/lib/codemirror.css'
2
- // require active-line.js
3
- import 'codemirror/addon/selection/active-line.js'
4
- // styleSelectedText
5
- import 'codemirror/addon/selection/mark-selection.js'
6
- // hint
7
- import 'codemirror/addon/hint/show-hint.js'
8
- import 'codemirror/addon/hint/sql-hint.js'
9
- import 'codemirror/addon/hint/show-hint.css'
10
- import 'codemirror/addon/hint/javascript-hint.js'
11
- // highlightSelectionMatches
12
- import 'codemirror/addon/scroll/annotatescrollbar.js'
13
- import 'codemirror/addon/search/matchesonscrollbar.js'
14
- import 'codemirror/addon/search/match-highlighter.js'
15
- // keyMap
16
- import 'codemirror/mode/go/go.js'
17
- import 'codemirror/mode/sql/sql.js'
18
- import 'codemirror/mode/javascript/javascript.js'
19
- import 'codemirror/addon/edit/matchbrackets.js'
20
- import 'codemirror/addon/comment/comment.js'
21
- import 'codemirror/addon/dialog/dialog.js'
22
- import 'codemirror/addon/dialog/dialog.css'
23
- import 'codemirror/addon/search/searchcursor.js'
24
- import 'codemirror/addon/search/search.js'
25
- import 'codemirror/keymap/sublime.js'
26
- // foldGutter
27
- import 'codemirror/addon/fold/foldgutter.css'
28
- import 'codemirror/addon/fold/brace-fold.js'
29
- import 'codemirror/addon/fold/comment-fold.js'
30
- import 'codemirror/addon/fold/foldcode.js'
31
- import 'codemirror/addon/fold/foldgutter.js'
32
- import 'codemirror/addon/fold/indent-fold.js'
33
- import 'codemirror/addon/fold/markdown-fold.js'
34
- import 'codemirror/addon/fold/xml-fold.js'
35
- // 编辑的主题文件
36
- import 'codemirror/theme/dracula.css'
37
- import 'codemirror/theme/base16-light.css'
38
- import 'codemirror/theme/monokai.css'
39
- // 括号自动不全
40
- import 'codemirror/addon/edit/closebrackets.js'
1
+ import 'codemirror/lib/codemirror.css'
2
+ // require active-line.js
3
+ import 'codemirror/addon/selection/active-line.js'
4
+ // styleSelectedText
5
+ import 'codemirror/addon/selection/mark-selection.js'
6
+ // hint
7
+ import 'codemirror/addon/hint/show-hint.js'
8
+ import 'codemirror/addon/hint/sql-hint.js'
9
+ import 'codemirror/addon/hint/show-hint.css'
10
+ import 'codemirror/addon/hint/javascript-hint.js'
11
+ // highlightSelectionMatches
12
+ import 'codemirror/addon/scroll/annotatescrollbar.js'
13
+ import 'codemirror/addon/search/matchesonscrollbar.js'
14
+ import 'codemirror/addon/search/match-highlighter.js'
15
+ // keyMap
16
+ import 'codemirror/mode/go/go.js'
17
+ import 'codemirror/mode/sql/sql.js'
18
+ import 'codemirror/mode/javascript/javascript.js'
19
+ import 'codemirror/addon/edit/matchbrackets.js'
20
+ import 'codemirror/addon/comment/comment.js'
21
+ import 'codemirror/addon/dialog/dialog.js'
22
+ import 'codemirror/addon/dialog/dialog.css'
23
+ import 'codemirror/addon/search/searchcursor.js'
24
+ import 'codemirror/addon/search/search.js'
25
+ import 'codemirror/keymap/sublime.js'
26
+ // foldGutter
27
+ import 'codemirror/addon/fold/foldgutter.css'
28
+ import 'codemirror/addon/fold/brace-fold.js'
29
+ import 'codemirror/addon/fold/comment-fold.js'
30
+ import 'codemirror/addon/fold/foldcode.js'
31
+ import 'codemirror/addon/fold/foldgutter.js'
32
+ import 'codemirror/addon/fold/indent-fold.js'
33
+ import 'codemirror/addon/fold/markdown-fold.js'
34
+ import 'codemirror/addon/fold/xml-fold.js'
35
+ // 编辑的主题文件
36
+ import 'codemirror/theme/dracula.css'
37
+ import 'codemirror/theme/base16-light.css'
38
+ import 'codemirror/theme/monokai.css'
39
+ // 括号自动不全
40
+ import 'codemirror/addon/edit/closebrackets.js'