lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改文本编辑器

Browse Source
This commit is contained in:
jmal 2020-07-09 18:03:16 +08:00
parent 7b1035d02f
commit 3eb561bcb2
2 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/FancyTree/index.vue
View File

@ -1,15 +1,24 @@
<template>
<div id="dir-tree" >
<v-contextmenu ref="contextmenu" :theme="lightTheme?'default':'dark'" @contextmenu="contextmenu">
<v-contextmenu-item v-for="item of menus" :key="item.operation" @click="contextmenuClick(item.operation)">
<svg-icon :icon-class="item.iconClass"></svg-icon>
{{item.label}}
</v-contextmenu-item>
</v-contextmenu>
<div>
<div class="dir-tools" style="min-width: 272px;">
<el-button-group>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-arrow-left" @click="upperLeve">上一级</el-button>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-plus">新建</el-button>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-search">搜索</el-button>
</el-button-group>
</div>
<div id="dir-tree" :style="{width: contentsWidth+'px',height: contentsHieght+'px'}">
<v-contextmenu ref="contextmenu" :theme="lightTheme?'default':'dark'" @contextmenu="contextmenu">
<v-contextmenu-item v-for="item of menus" :key="item.operation" @click="contextmenuClick(item.operation)">
<svg-icon :icon-class="item.iconClass"></svg-icon>
{{item.label}}
</v-contextmenu-item>
</v-contextmenu>
</div>
</div>
</template>
<script>
import $ from 'jquery'
import 'v-contextmenu/dist/index.css'
import { iconClass,suffix } from '@/utils/file-type'
import 'jquery.fancytree/dist/skin-win8/ui.fancytree.less';
@ -20,6 +29,14 @@
export default {
name: "FancyTree",
props: {
contentsWidth: {
type: Number,
default: 250
},
contentsHieght: {
type: Number,
default: 500
},
directoryTreeData: {
type: Array,
default: () => []

58
src/components/preview/SimTextPreview.vue
View File

@ -47,18 +47,9 @@
</div>
</div>
<div class="content">
<!--<div class="editor_main_storey"></div>-->
<div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+31+'px'}">
<div class="dir-tools" :style="{width: contentsWidth+2+'px',minWidth: 272+'px'}">
<el-button-group>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-arrow-left" @click="upperLeve">上一级</el-button>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-plus">新建</el-button>
<el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-search">搜索</el-button>
</el-button-group>
</div>
<div class="content-tree" :style="{width: contentsWidth+'px',height: editorHieght+'px'}">
<fancy-tree ref="fancTree" v-if="directoryTreeData.length > 0" :lightTheme="lightTheme" :directoryTreeData="directoryTreeData" @treeNodeClick="treeNodeClick"></fancy-tree>
<div class="content-tree">
<fancy-tree ref="fancTree" :contentsWidth="contentsWidth" :contentsHieght="editorHieght" v-if="directoryTreeData.length > 0" :lightTheme="lightTheme" :directoryTreeData="directoryTreeData" @treeNodeClick="treeNodeClick"></fancy-tree>
</div>
</div>
<div class="editor-resize" style="width: 3px;cursor: col-resize;"></div>
@ -279,12 +270,6 @@
}
return editorLanguage;
},
upperLeve(){
this.$refs.fancTree.upperLeve()
},
refresh(){
this.$refs.fancTree.refresh()
},
dragControllerDiv() {
let resize = document.querySelector('.el-dialog__body .content .editor-resize');
let left = document.querySelector('.file-contents');
@ -301,8 +286,11 @@
// 移动的距离。负数向左移动,正数向右移动
let moveLen = endX - startX
if((contentsStartWidth + moveLen) > leftTools.style.minWidth.split('\px')[0]){
that.contentsWidth = contentsStartWidth + moveLen
that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen)
let contentsWidth = contentsStartWidth + moveLen
if(600 > contentsWidth){
that.contentsWidth = contentsWidth
that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen)
}
}
}
// 鼠标松开事件
@ -620,19 +608,22 @@
border: 1px solid #565656;
color: #ffffff;
}
.el-button:focus{
background: #FFF;
border: 1px solid #DCDFE6;
color: #606266;
}
.dark-button:focus{
background: #565656;
border: 1px solid #565656;
color: #ffffff;
/*.el-button:focus{*/
/*background: #FFF;*/
/*border: 1px solid #DCDFE6;*/
/*color: #606266;*/
/*}*/
/*.dark-button:focus{*/
/*background: #565656;*/
/*border: 1px solid #565656;*/
/*color: #ffffff;*/
/*}*/
.light-button:hover {
background: #DCDFE6;
}
.dark-button:hover {
color: #409EFF;
background-color: $bg-color;
background-color: #1e1e1e;
}
.el-dialog__header {
@ -716,14 +707,15 @@
.file-contents{
.content-tree{
overflow-y: scroll;
overflow-x: hidden;
@include scrollBarLightStyle;
background: #fff;
box-shadow: inset #ececec -7px 0px;
#dir-tree {
overflow-y: scroll;
overflow-x: hidden;
@include scrollBarLightStyle;
ul.fancytree-container{
padding: 3px 0 0 0;
}
@ -774,10 +766,10 @@
}
.content-tree {
@include scrollBarDarkStyle;
background: $bg-color;
box-shadow: inset #2d2d2d -7px 0px;
#dir-tree {
@include scrollBarDarkStyle;
span.fancytree-title {
color: #dedede;
}