优化：文本预览，适配移动端
This commit is contained in:
jmal
parent
e637ee2366
commit
e7fc2666c3
@ -26,7 +26,6 @@
|
||||
<el-input placeholder="请输入内容" size="small">
|
||||
<el-button slot="append" size="small" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
<el-button slot="reference" :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-search">搜索</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-button-group>
|
||||
@ -135,7 +134,7 @@
|
||||
let input = data.node.span.querySelector('.fancytree-title .fancytree-edit-input')
|
||||
let width = input.style.width.substring(0,input.style.width.length-2)
|
||||
input.style.width = parseInt(width)+50+'px'
|
||||
if(input.value.length -1 > data.node.data.suffix.length){
|
||||
if(input.value && input.value.length -1 > data.node.data.suffix.length){
|
||||
input.selectionStart = 0
|
||||
input.selectionEnd = input.value.length - 1 - data.node.data.suffix.length
|
||||
}
|
||||
@ -246,6 +245,7 @@
|
||||
username: this.$store.state.user.name,
|
||||
path: data.path
|
||||
}).then(()=>{
|
||||
this.$emit('removeFile', data.path)
|
||||
let node = this.tree.getActiveNode()
|
||||
node.remove()
|
||||
this.$message.success("删除成功！")
|
||||
|
||||
@ -76,6 +76,7 @@
|
||||
@treeNodeClick="treeNodeClick"
|
||||
@onLoadTreePath="onLoadTreePath"
|
||||
@onRename="onRename"
|
||||
@removeFile="removeFile"
|
||||
>
|
||||
</fancy-tree>
|
||||
</div>
|
||||
@ -85,7 +86,7 @@
|
||||
<i v-show="!options.readOnly && !moblie " class="editor-resize-conter" icon="el-icon-arrow-right" title="影藏文件目录" @click="hideContents"/>
|
||||
</div>
|
||||
<div :style="{width: editorWidth-2+'px'}">
|
||||
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
|
||||
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
|
||||
<el-tab-pane
|
||||
v-for="(item,index) in editableTabs"
|
||||
:key="item.name"
|
||||
@ -95,21 +96,20 @@
|
||||
<span slot="label"><svg-icon class="tabs-icon-svg" :icon-class="findSvgClass(item.name)"></svg-icon> {{item.title}}</span>
|
||||
<div v-if="textPreviewVisible" class="editor">
|
||||
<vditor-preview
|
||||
:ref="'vditor'+index"
|
||||
class="content-body"
|
||||
v-show="editableTabsValue.endsWith('.md') && previewMode"
|
||||
:content="item.content"
|
||||
:style="{height: editorHieght+'px'}"
|
||||
/>
|
||||
<MonacoEditor
|
||||
v-show="editableTabsValue.endsWith('.md') ? !previewMode: true"
|
||||
ref="monacoEditor"
|
||||
:ref="'monacoEditor'+index"
|
||||
:width="editorWidth"
|
||||
:height="editorHieght"
|
||||
:theme="lightTheme?'vs':'vs-dark'"
|
||||
:language="item.language"
|
||||
:diffEditor="diffEditor"
|
||||
original="..."
|
||||
:value="item.content"
|
||||
:options="options"
|
||||
@change="change($event,index)"
|
||||
@save="save($event,index)"
|
||||
@ -182,6 +182,7 @@
|
||||
contextmenu: true,
|
||||
codeLens: true,
|
||||
readOnly: true,
|
||||
lineNumbers: this.$pc,
|
||||
minimap: {
|
||||
enabled: this.$pc
|
||||
},
|
||||
@ -217,7 +218,9 @@
|
||||
},
|
||||
directoryTreeData: {},
|
||||
editableTabsValue: '1',
|
||||
nextActiveName: '',
|
||||
editableTabs: [],
|
||||
editableValueMap: new Map(),
|
||||
filePathNav: '',
|
||||
toolbars: {
|
||||
readmodel: true, // 沉浸式阅读
|
||||
@ -306,9 +309,9 @@
|
||||
copyTitle: res.data.name,
|
||||
language: this.getEditorLanguage(res.data.suffix),
|
||||
status: undefined,//标签状态
|
||||
name: pathname,
|
||||
content: res.data.contentText
|
||||
name: pathname
|
||||
})
|
||||
this.setEditMap(0, res.data.contentText)
|
||||
this.editableTabsValue = pathname
|
||||
// 界面的渲染后的初始化工作
|
||||
this.$nextTick(()=>{
|
||||
@ -479,6 +482,12 @@
|
||||
onLoadTreePath(path){
|
||||
this.filePathNav = path
|
||||
},
|
||||
removeFile(filepath) {
|
||||
let findIndex = this.editableTabs.findIndex(editable => editable.name === filepath)
|
||||
if(findIndex > -1){
|
||||
this.editableTabs.splice(findIndex, 1)
|
||||
}
|
||||
},
|
||||
treeNodeClick(row) {
|
||||
if(row.isFolder){
|
||||
return
|
||||
@ -519,17 +528,19 @@
|
||||
copyTitle:row.name,
|
||||
status: undefined,
|
||||
language: this.getEditorLanguage(row.suffix),
|
||||
name:row.path,
|
||||
content:res.data.contentText
|
||||
name:row.path
|
||||
}
|
||||
if(row.isAddTab){
|
||||
this.editableTabs.push(tab)
|
||||
this.setEditMap(this.editableTabs.length -1, res.data.contentText)
|
||||
}else{
|
||||
let thisTabIndex = this.editableTabs.findIndex(tab=> tab.status===undefined)
|
||||
if(thisTabIndex > -1){
|
||||
this.editableTabs[thisTabIndex] = tab
|
||||
this.setEditMap(thisTabIndex, res.data.contentText)
|
||||
}else{
|
||||
this.editableTabs.push(tab)
|
||||
this.setEditMap(this.editableTabs.length - 1, res.data.contentText)
|
||||
}
|
||||
}
|
||||
this.editableTabsValue = row.path
|
||||
@ -538,8 +549,19 @@
|
||||
})
|
||||
}else{
|
||||
this.editableTabsValue = row.path
|
||||
this.clickTab()
|
||||
}
|
||||
},
|
||||
setEditMap(index, text) {
|
||||
this.editableValueMap.set(index, text)
|
||||
this.$nextTick(()=> {
|
||||
let ref = 'monacoEditor' + index
|
||||
this.$refs[ref][0]._setValue(text)
|
||||
if (!this.$pc && this.dialogWidthPercent < 1) {
|
||||
this.fullScreen()
|
||||
}
|
||||
})
|
||||
},
|
||||
containerResize() {
|
||||
this.loadEditorSize()
|
||||
},
|
||||
@ -554,7 +576,9 @@
|
||||
if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
|
||||
this.options.readOnly = false
|
||||
}
|
||||
console.log(this.options.readOnly, this.moblie)
|
||||
if (!this.$pc) {
|
||||
this.options.readOnly = true
|
||||
}
|
||||
if(this.options.readOnly || this.moblie){
|
||||
this.$nextTick(()=> {
|
||||
this.editorWidth += this.contentsWidth
|
||||
@ -598,9 +622,15 @@
|
||||
this.isSaveDialogVisible = false
|
||||
this.isShowUpdateBtn = false
|
||||
},
|
||||
// 放弃修改
|
||||
closeTabDialog(){
|
||||
this.isTabSaveDialogVisible = false
|
||||
this.editableTabsValue = this.nextActiveName
|
||||
this.editableTabs.splice(this.removeIndex,1)
|
||||
let modifyingIndex = this.editableTabs.findIndex(editable => editable.status === 'Modifying')
|
||||
if (modifyingIndex < 0){
|
||||
this.isShowUpdateBtn = false
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.textPreviewVisible = false
|
||||
@ -610,7 +640,7 @@
|
||||
this.closeAllTabs()
|
||||
},
|
||||
change(value,index) {
|
||||
if(value === this.editableTabs[index].content){
|
||||
if(value === this.editableValueMap.get(index)){
|
||||
if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
|
||||
this.editableTabs[index].title = this.editableTabs[index].copyTitle
|
||||
this.editableTabs[index].status = 'Modified'
|
||||
@ -759,7 +789,17 @@
|
||||
}
|
||||
},
|
||||
changePreviewMode() {
|
||||
let currentIndex = this.editableTabs.findIndex(editable => editable.name === this.editableTabsValue)
|
||||
if (currentIndex > -1){
|
||||
let ref = 'vditor' + currentIndex
|
||||
this.$refs[ref][0].setContent(this.editableValueMap.get(currentIndex))
|
||||
}
|
||||
this.previewMode = !this.previewMode
|
||||
this.clickTab()
|
||||
},
|
||||
clickTab() {
|
||||
this.editorWidth += 0.001
|
||||
this.editorHieght += 0.001
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs;
|
||||
@ -776,6 +816,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
this.nextActiveName = activeName
|
||||
if(this.editableTabs[removeIndex].status !== 'Modifying'){
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
|
||||
@ -30,10 +30,7 @@ import "vditor/src/assets/scss/index.scss"
|
||||
},
|
||||
watch: {
|
||||
content(val){
|
||||
if(!this.vditorPreviewShow){
|
||||
this.vditorPreviewInit(val)
|
||||
this.vditorPreviewShow = true
|
||||
}
|
||||
this.setContent(val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -43,6 +40,12 @@ import "vditor/src/assets/scss/index.scss"
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
setContent(val) {
|
||||
if(!this.vditorPreviewShow){
|
||||
this.vditorPreviewInit(val)
|
||||
this.vditorPreviewShow = true
|
||||
}
|
||||
},
|
||||
vditorPreviewInit(content){
|
||||
const that = this
|
||||
vditor.preview(document.getElementById('vditor'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user