gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 思维导图支持无极缩放

Browse Source
This commit is contained in:
kuaifan 2022-01-06 08:08:40 +08:00
parent 7c64b27ef4
commit 919dc3cdea
2 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
resources/assets/js/components/minder/minder.vue
View File

@ -1,22 +1,16 @@
<template>
<div class="minder-editor-container">
<div class="quickbar">
<Tooltip placement="top" theme="light">
<i class="ft icon" :title="$L('缩放')">&#xE7B3;</i>
<div slot="content">
<ul class="quickul">
<li @click="execCommand('Zoom', 200)">200%</li>
<li @click="execCommand('Zoom', 150)">150%</li>
<li @click="execCommand('Zoom', 100)">100%</li>
<li @click="execCommand('Zoom', 50)">50%</li>
<li @click="execCommand('Zoom', 25)">25%</li>
</ul>
<ETooltip placement="top" effect="light">
<div><i class="ft icon" :title="$L('缩放')">&#xE7B3;</i></div>
<div slot="content" class="minder-editor-slider">
<Slider v-model="zoom" :min="10" :max="300"></Slider>
</div>
</Tooltip>
<Tooltip v-if="readOnly!==true" placement="top" theme="light">
<i class="ft icon" :title="$L('图形')">&#xE621;</i>
</ETooltip>
<ETooltip v-if="readOnly!==true" placement="top" effect="light">
<div><i class="ft icon" :title="$L('图形')">&#xE621;</i></div>
<div slot="content">
<ul class="quickul mold">
<ul class="minder-editor-quickul mold">
<li @click="execCommand('template', 'default')"><span class="default"></span></li>
<li @click="execCommand('template', 'structure')"><span class="structure"></span></li>
<li @click="execCommand('template', 'filetree')"><span class="filetree"></span></li>
@ -25,11 +19,11 @@
<li @click="execCommand('template', 'tianpan')"><span class="tianpan"></span></li>
</ul>
</div>
</Tooltip>
<Tooltip v-if="readOnly!==true" placement="top" theme="light">
<i class="ft icon" :title="$L('样式')">&#xE678;</i>
</ETooltip>
<ETooltip v-if="readOnly!==true" placement="top" effect="light">
<div><i class="ft icon" :title="$L('样式')">&#xE678;</i></div>
<div slot="content">
<ul class="quickul">
<ul class="minder-editor-quickul">
<li @click="execCommand('theme', 'fresh-blue')">{{$L('天空蓝')}}</li>
<li @click="execCommand('theme', 'wire')">{{$L('线框')}}</li>
<li @click="execCommand('theme', 'fish')">{{$L('鱼骨图')}}</li>
@ -41,11 +35,11 @@
<li @click="execCommand('theme', 'tianpan-compact')">{{$L('紧凑天盘')}}</li>
</ul>
</div>
</Tooltip>
<Tooltip placement="top" theme="light">
<i class="ft icon" :title="$L('折叠')">&#xE779;</i>
</ETooltip>
<ETooltip placement="top" effect="light">
<div><i class="ft icon" :title="$L('折叠')">&#xE779;</i></div>
<div slot="content">
<ul class="quickul">
<ul class="minder-editor-quickul">
<li @click="execCommand('ExpandToLevel', 1)">{{$L('展开到一级节点')}}</li>
<li @click="execCommand('ExpandToLevel', 2)">{{$L('展开到二级节点')}}</li>
<li @click="execCommand('ExpandToLevel', 3)">{{$L('展开到三级节点')}}</li>
@ -54,7 +48,7 @@
<li @click="execCommand('ExpandToLevel', 99)">{{$L('展开全部节点')}}</li>
</ul>
</div>
</Tooltip>
</ETooltip>
<ETooltip placement="top" :content="$L('居中')">
<div @click="minder.execCommand('camera', minder.getRoot(), 600)"><i class="ft icon">&#xE61F;</i></div>
</ETooltip>
@ -129,7 +123,10 @@
color: #0285d7;
}
}
.quickul {
}
</style>
<style lang="less">
.minder-editor-quickul {
li {
list-style: none;
cursor: pointer;
@ -164,8 +161,11 @@
}
}
}
}
}
}
.minder-editor-slider {
width: 200px;
margin: 0 6px;
}
</style>
<script>
import {generateMixed} from 'vue-kityminder-gg/src/utils/index.js';
@ -219,6 +219,8 @@
minder: null,
isHand: false,
bakValue: '',
zoom: 100,
};
},
methods: {
@ -321,6 +323,9 @@
},
deep: true,
immediate: true
},
zoom(val) {
this.execCommand('Zoom', val)
}
}
};

26
resources/assets/sass/element.scss vendored
View File

@ -39,10 +39,34 @@ $--dropdown-menuItem-hover-color: #606266;
height: 5px;
}
.el-tooltip__popper.is-light[x-placement^="bottom"] {
.el-tooltip__popper {
&.is-light {
border-width: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
&[x-placement^="top"] {
.popper__arrow {
border-top-color: hsla(0, 0%, 85%, .5);
}
}
&[x-placement^="bottom"] {
.popper__arrow {
border-bottom-color: hsla(0, 0%, 85%, .5);
}
}
&[x-placement^="left"] {
.popper__arrow {
border-left-color: hsla(0, 0%, 85%, .5);
}
}
&[x-placement^="right"] {
.popper__arrow {
border-right-color: hsla(0, 0%, 85%, .5);
}
}
}
}
.el-popover {
border-width: 0;
box-shadow: 0 1px 6px rgba(0,0,0,.2);
}