refactor(front): 重构前端组件并优化代码
- 移除了多个无用的组件和文件 - 更新了部分组件的实现方式 - 优化了代码结构和样式 - 修复了CuteSimpleTable、CuteDragTable组件，在无数据时，数据表格不刷新问题
This commit is contained in:
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div class="json-editor">
|
||||
<textarea ref="textarea" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeMirror from 'codemirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 替换主题这里需修改名称
|
||||
import 'codemirror/theme/idea.css'
|
||||
import 'codemirror/mode/clike/clike'
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
const editorValue = this.editor.getValue()
|
||||
if (value !== editorValue) {
|
||||
this.editor.setValue(this.value)
|
||||
}
|
||||
},
|
||||
height(value) {
|
||||
this.editor.setSize('auto', this.height)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||
mode: 'text/x-java',
|
||||
lineNumbers: true,
|
||||
lint: true,
|
||||
lineWrapping: true,
|
||||
tabSize: 2,
|
||||
cursorHeight: 0.9,
|
||||
// 替换主题这里需修改名称
|
||||
theme: 'idea',
|
||||
readOnly: false
|
||||
})
|
||||
this.editor.setSize('auto', this.height)
|
||||
this.editor.setValue(this.value)
|
||||
},
|
||||
methods: {
|
||||
getValue() {
|
||||
return this.editor.getValue()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.json-editor{
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.json-editor >>> .CodeMirror {
|
||||
font-size: 14px;
|
||||
font-weight:normal
|
||||
}
|
||||
.json-editor >>> .CodeMirror-scroll{
|
||||
}
|
||||
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
||||
color: #F08047;
|
||||
}
|
||||
</style>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div ref="editor" style="border: 1px solid #ccc;">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editor"
|
||||
:default-config="toolbarConfig"
|
||||
:mode="editMode"
|
||||
/>
|
||||
<Editor
|
||||
v-model="editValue"
|
||||
:style="{'height': editorHeight +'px', 'overflow-y': 'hidden'}"
|
||||
:default-config="editorConfig"
|
||||
:mode="editMode"
|
||||
@onCreated="onCreated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { upload } from '@/utils/upload'
|
||||
import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'WangEditor',
|
||||
components: { Toolbar, Editor },
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
editorHeight: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 420
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const _this = this
|
||||
return {
|
||||
toolbarConfig: {},
|
||||
editorConfig: { placeholder: '请输入内容...', MENU_CONF: {
|
||||
'uploadImage': {
|
||||
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
||||
allowedFileTypes: ['image/*'],
|
||||
// 自定义上传
|
||||
async customUpload(file, insertFn) { // JS 语法
|
||||
upload(_this.imagesUploadApi, file).then(res => {
|
||||
const data = res.data
|
||||
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
|
||||
// 最后插入图片
|
||||
insertFn(url, '', '')
|
||||
})
|
||||
}
|
||||
}
|
||||
}},
|
||||
editMode: 'simple',
|
||||
editor: null,
|
||||
editValue: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
editValue(newVal, oldVal) {
|
||||
this.$emit('input', newVal)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onCreated(editor) {
|
||||
this.editor = Object.seal(editor)
|
||||
this.editValue = this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
<style scoped>
|
||||
.text {
|
||||
text-align:left;
|
||||
}
|
||||
::v-deep .w-e-text-container {
|
||||
height: 420px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<textarea ref="textarea" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeMirror from 'codemirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 替换主题这里需修改名称
|
||||
import 'codemirror/theme/idea.css'
|
||||
import 'codemirror/mode/yaml/yaml'
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '450px'
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
const editorValue = this.editor.getValue()
|
||||
if (value !== editorValue) {
|
||||
this.editor.setValue(this.value)
|
||||
}
|
||||
},
|
||||
height(newHeight) {
|
||||
this.editor.setSize('auto', newHeight)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||
mode: 'text/x-yaml',
|
||||
lineNumbers: true,
|
||||
lint: true,
|
||||
lineWrapping: true,
|
||||
tabSize: 2,
|
||||
cursorHeight: 0.9,
|
||||
// 替换主题这里需修改名称
|
||||
theme: 'idea'
|
||||
})
|
||||
this.editor.setSize('auto', this.height)
|
||||
if (this.value) {
|
||||
this.editor.setValue(this.value)
|
||||
}
|
||||
this.editor.setOption('readOnly', this.readOnly)
|
||||
this.editor.on('change', cm => {
|
||||
this.$emit('changed', cm.getValue())
|
||||
this.$emit('input', cm.getValue())
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getValue() {
|
||||
return this.editor.getValue()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user