mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-07 21:54:05 +08:00
编辑器跑通,增加axios
This commit is contained in:
parent
5eb5bfb365
commit
e07dc3542b
215
package-lock.json
generated
215
package-lock.json
generated
@ -1931,16 +1931,6 @@
|
||||
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"big.js": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz",
|
||||
@ -1973,23 +1963,6 @@
|
||||
"unique-filename": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
|
||||
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"emojis-list": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
|
||||
@ -2028,13 +2001,6 @@
|
||||
"universalify": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618559744568&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
|
||||
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"html-webpack-plugin": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-3.2.0.tgz?cache=0&sync_timestamp=1608278250985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-3.2.0.tgz",
|
||||
@ -2132,16 +2098,6 @@
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1622293670728&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
|
||||
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"terser-webpack-plugin": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "http://npm.xesv5.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
|
||||
@ -2168,67 +2124,6 @@
|
||||
"define-properties": "^1.1.2",
|
||||
"object.getownpropertydescriptors": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.2.0",
|
||||
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1620717857145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
|
||||
"integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz",
|
||||
"integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
|
||||
"integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"emojis-list": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz",
|
||||
"integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -2966,6 +2861,21 @@
|
||||
"integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://r.cnpmjs.org/axios/download/axios-0.21.4.tgz",
|
||||
"integrity": "sha1-xnuQ3AVo5cHPKwuFjEO6KOLtpXU=",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"follow-redirects": {
|
||||
"version": "1.14.3",
|
||||
"resolved": "https://r.cnpmjs.org/follow-redirects/download/follow-redirects-1.14.3.tgz",
|
||||
"integrity": "sha1-atp4EY2NJMruWVWVrM3ArGq9Ai4="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-eslint": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
|
||||
@ -4813,7 +4723,7 @@
|
||||
},
|
||||
"de-indent": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
|
||||
"resolved": "https://r.cnpmjs.org/de-indent/download/de-indent-1.0.2.tgz",
|
||||
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
|
||||
"dev": true
|
||||
},
|
||||
@ -12916,9 +12826,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"vue": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600188494896&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
|
||||
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://r.cnpmjs.org/vue/download/vue-2.6.14.tgz",
|
||||
"integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
|
||||
},
|
||||
"vue-codemirror": {
|
||||
"version": "4.0.6",
|
||||
@ -13004,6 +12914,87 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.5.0",
|
||||
"resolved": "https://r.cnpmjs.org/vue-loader/download/vue-loader-16.5.0.tgz",
|
||||
"integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://r.cnpmjs.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://r.cnpmjs.org/chalk/download/chalk-4.1.2.tgz",
|
||||
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://r.cnpmjs.org/color-convert/download/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://r.cnpmjs.org/color-name/download/color-name-1.1.4.tgz",
|
||||
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://r.cnpmjs.org/has-flag/download/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://r.cnpmjs.org/loader-utils/download/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://r.cnpmjs.org/supports-color/download/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-nestable": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://r.cnpmjs.org/vue-nestable/download/vue-nestable-2.6.0.tgz",
|
||||
@ -13042,9 +13033,9 @@
|
||||
}
|
||||
},
|
||||
"vue-template-compiler": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.12.tgz?cache=0&sync_timestamp=1597927307972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-template-compiler%2Fdownload%2Fvue-template-compiler-2.6.12.tgz",
|
||||
"integrity": "sha1-lH7XGWdEyKUoXr4SM/6WBDf8xX4=",
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://r.cnpmjs.org/vue-template-compiler/download/vue-template-compiler-2.6.14.tgz",
|
||||
"integrity": "sha1-ovDn2YVnDULJye4NBE/tdpD092M=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"de-indent": "^1.0.2",
|
||||
|
@ -23,6 +23,7 @@
|
||||
"@babel/parser": "^7.11.5",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^1.7.2",
|
||||
"axios": "^0.21.4",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"core-js": "^3.6.4",
|
||||
"crypto-random-string": "^3.3.0",
|
||||
@ -50,7 +51,7 @@
|
||||
"stringify-object": "^3.3.0",
|
||||
"vant": "^2.10.7",
|
||||
"view-design": "^4.3.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue": "^2.6.14",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-nestable": "^2.6.0",
|
||||
"vue-router": "^3.4.9",
|
||||
@ -71,7 +72,7 @@
|
||||
"lint-staged": "^9.5.0",
|
||||
"sass": "^1.25.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
@ -1,171 +1,173 @@
|
||||
<template>
|
||||
<div class="example">
|
||||
<div class="codemirror">
|
||||
<codemirror
|
||||
v-model="code"
|
||||
:options="cmOption"
|
||||
@cursorActivity="onCmCursorActivity"
|
||||
@ready="onCmReady"
|
||||
@focus="onCmFocus"
|
||||
@blur="onCmBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="codemirror">
|
||||
<codemirror v-model="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
|
||||
@focus="onCmFocus" @blur="onCmBlur" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dedent from 'dedent'
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
import dedent from 'dedent'
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
|
||||
// base style
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// base style
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
|
||||
// theme css
|
||||
import 'codemirror/theme/monokai.css'
|
||||
// theme css
|
||||
import 'codemirror/theme/monokai.css'
|
||||
|
||||
// language
|
||||
import 'codemirror/mode/vue/vue.js'
|
||||
// language
|
||||
import 'codemirror/mode/vue/vue.js'
|
||||
|
||||
// active-line.js
|
||||
import 'codemirror/addon/selection/active-line.js'
|
||||
// active-line.js
|
||||
import 'codemirror/addon/selection/active-line.js'
|
||||
|
||||
// styleSelectedText
|
||||
import 'codemirror/addon/selection/mark-selection.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
// styleSelectedText
|
||||
import 'codemirror/addon/selection/mark-selection.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
|
||||
// highlightSelectionMatches
|
||||
import 'codemirror/addon/scroll/annotatescrollbar.js'
|
||||
import 'codemirror/addon/search/matchesonscrollbar.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/match-highlighter.js'
|
||||
// highlightSelectionMatches
|
||||
import 'codemirror/addon/scroll/annotatescrollbar.js'
|
||||
import 'codemirror/addon/search/matchesonscrollbar.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/match-highlighter.js'
|
||||
|
||||
// keyMap
|
||||
import 'codemirror/mode/clike/clike.js'
|
||||
import 'codemirror/addon/edit/matchbrackets.js'
|
||||
import 'codemirror/addon/comment/comment.js'
|
||||
import 'codemirror/addon/dialog/dialog.js'
|
||||
import 'codemirror/addon/dialog/dialog.css'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/search.js'
|
||||
import 'codemirror/keymap/sublime.js'
|
||||
// keyMap
|
||||
import 'codemirror/mode/clike/clike.js'
|
||||
import 'codemirror/addon/edit/matchbrackets.js'
|
||||
import 'codemirror/addon/comment/comment.js'
|
||||
import 'codemirror/addon/dialog/dialog.js'
|
||||
import 'codemirror/addon/dialog/dialog.css'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/search.js'
|
||||
import 'codemirror/keymap/sublime.js'
|
||||
|
||||
// foldGutter
|
||||
import 'codemirror/addon/fold/foldgutter.css'
|
||||
import 'codemirror/addon/fold/brace-fold.js'
|
||||
import 'codemirror/addon/fold/comment-fold.js'
|
||||
import 'codemirror/addon/fold/foldcode.js'
|
||||
import 'codemirror/addon/fold/foldgutter.js'
|
||||
import 'codemirror/addon/fold/indent-fold.js'
|
||||
import 'codemirror/addon/fold/markdown-fold.js'
|
||||
import 'codemirror/addon/fold/xml-fold.js'
|
||||
// foldGutter
|
||||
import 'codemirror/addon/fold/foldgutter.css'
|
||||
import 'codemirror/addon/fold/brace-fold.js'
|
||||
import 'codemirror/addon/fold/comment-fold.js'
|
||||
import 'codemirror/addon/fold/foldcode.js'
|
||||
import 'codemirror/addon/fold/foldgutter.js'
|
||||
import 'codemirror/addon/fold/indent-fold.js'
|
||||
import 'codemirror/addon/fold/markdown-fold.js'
|
||||
import 'codemirror/addon/fold/xml-fold.js'
|
||||
|
||||
require(['axios'], axios => {
|
||||
axios.defaults.baseURL = '';
|
||||
self.axios = axios;
|
||||
});
|
||||
|
||||
|
||||
export default {
|
||||
name: 'code-editor',
|
||||
title: 'Mode: text/x-vue & Theme: monokai',
|
||||
components: {
|
||||
codemirror
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
code: dedent`
|
||||
// 以下代码中的方法会被注入到最终的代码中,如果命名与源代码有相同的,则会替换源代码
|
||||
// 内部集成了axios,开发者可以直接通过axios发起网络请求,不过接口需要允许跨域。
|
||||
// axios官方文档:https://www.npmjs.com/package/axios
|
||||
export default {
|
||||
name: 'codemirror-example-vue',
|
||||
title: 'Mode: text/x-vue & Theme: monokai',
|
||||
components: {
|
||||
codemirror
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
code: dedent`
|
||||
<template>
|
||||
<h1>Hello World!</h1>
|
||||
<codemirror v-model="code" :options="cmOption" />
|
||||
</template>
|
||||
props: [],
|
||||
components: {},
|
||||
|
||||
<script>
|
||||
// import 'some-codemirror-resource'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: 'const A = 10',
|
||||
cmOption: {
|
||||
tabSize: 4,
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
foldGutter: true,
|
||||
styleSelectedText: true,
|
||||
mode: 'text/javascript',
|
||||
keyMap: "sublime",
|
||||
matchBrackets: true,
|
||||
showCursorWhenSelecting: true,
|
||||
theme: "monokai",
|
||||
extraKeys: { "Ctrl": "autocomplete" },
|
||||
hintOptions:{
|
||||
completeSingle: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${'<\/script>'}
|
||||
data() {
|
||||
return {
|
||||
|
||||
<style lang="scss">
|
||||
@import './sass/mixins';
|
||||
@import './sass/variables';
|
||||
main {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
`,
|
||||
cmOption: {
|
||||
tabSize: 4,
|
||||
foldGutter: true,
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
keyMap: "sublime",
|
||||
mode: 'text/x-vue',
|
||||
theme: 'monokai',
|
||||
extraKeys: {
|
||||
'F11'(cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"))
|
||||
},
|
||||
'Esc'(cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
request(){
|
||||
axios.get('https://www.baidu.com').then(res => console.info(res), err => console.error(err));
|
||||
}
|
||||
},
|
||||
|
||||
// 生命周期 start
|
||||
beforeCreate() {},
|
||||
created() {},
|
||||
|
||||
beforeMount() {},
|
||||
mounted() {},
|
||||
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
|
||||
beforeDestory() {},
|
||||
destoryed() {},
|
||||
// 生命周期 end
|
||||
|
||||
fillter: {},
|
||||
};
|
||||
|
||||
`,
|
||||
cmOption: {
|
||||
tabSize: 4,
|
||||
foldGutter: true,
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
keyMap: "sublime",
|
||||
mode: 'text/javascript',
|
||||
theme: 'monokai',
|
||||
extraKeys: {
|
||||
'F11'(cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"))
|
||||
},
|
||||
'Esc'(cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCmCursorActivity(codemirror) {
|
||||
},
|
||||
methods: {
|
||||
onCmCursorActivity(codemirror) {
|
||||
console.debug('onCmCursorActivity', codemirror)
|
||||
},
|
||||
onCmReady(codemirror) {
|
||||
console.debug('onCmReady', codemirror)
|
||||
},
|
||||
onCmFocus(codemirror) {
|
||||
console.debug('onCmFocus', codemirror)
|
||||
},
|
||||
onCmBlur(codemirror) {
|
||||
console.debug('onCmBlur', codemirror)
|
||||
}
|
||||
onCmReady(codemirror) {
|
||||
},
|
||||
onCmFocus(codemirror) {
|
||||
},
|
||||
onCmBlur(codemirror) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.codemirror,
|
||||
.pre {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.codemirror,
|
||||
.pre {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.pre {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
.pre {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
<style>
|
||||
.CodeMirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.vue-codemirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user