更新“OtherRunJS”工具

使用 CodeMirror
This commit is contained in:
2021-06-15 00:46:10 +08:00
parent 03c3afdf51
commit 13769aa057
2 changed files with 49 additions and 11 deletions

View File

@@ -107,8 +107,8 @@ let navTools = {
'run-js': { 'run-js': {
title: '执行 JavaScript', title: '执行 JavaScript',
component: 'OtherRunJS', component: 'OtherRunJS',
update: '20210503', update: '20210614',
version: '1', version: '2',
enabled: true enabled: true
} }
} }

View File

@@ -4,9 +4,9 @@
<!-- 输入 --> <!-- 输入 -->
<div class="input"> <div class="input">
<div class="title">代码</div> <div class="title">代码</div>
<el-input v-model="input.value" type="textarea" class="text" <div class="text">
:placeholder="input.placeholder" rows="10" <textarea ref="jsInput" placeholder="代码"></textarea>
></el-input> </div>
</div> </div>
<!-- 操作 --> <!-- 操作 -->
@@ -32,13 +32,17 @@
</template> </template>
<script> <script>
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/lib/codemirror.css';
export default { export default {
name: 'OtherRunJS', name: 'OtherRunJS',
data() { data() {
return { return {
input: { input: {
value: '', editor: null,
placeholder: '请在此处输入 JavaScript 代码' value: ''
}, },
output: { output: {
id: 0, id: 0,
@@ -46,8 +50,38 @@ export default {
} }
} }
}, },
mounted () {
this.init();
},
methods: { methods: {
// 初始化
init() {
var jsInput = this.$refs['jsInput'];
var datas = this.input;
datas.editor = CodeMirror.fromTextArea(jsInput, {
indentWithTabs: false,
indentUnit: 4,
lineNumbers: true,
mode: 'javascript',
theme: 'default'
});
datas.editor.setOption('extraKeys', {
// Tab 转空格
Tab: function(cm) {
var spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
cm.replaceSelection(spaces);
}
});
datas.editor.on('change', function (instance) {
// 同步 value
datas.value = instance.doc.getValue();
});
},
// 运行 // 运行
btnRun() { btnRun() {
var output = this.output; var output = this.output;
@@ -81,7 +115,7 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.input.value = ''; this.input.editor.doc.setValue('');
this.output.lines = []; this.output.lines = [];
this.$message({ this.$message({
message: '已清除', message: '已清除',
@@ -104,7 +138,9 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.tool-elem { .tool-elem {
@lineHeight: 1.2rem; @lineHeight: 1.25rem;
padding-bottom: 5rem;
> div { > div {
.text { .text {
@@ -115,8 +151,10 @@ export default {
} }
.input { .input {
/deep/ .text textarea { /deep/ .CodeMirror {
padding: 0.75rem; width: 100%;
height: calc(@lineHeight * 20 + 0.5rem);
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
line-height: @lineHeight; line-height: @lineHeight;
} }
} }