mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Demo：优化移动端的使用体验
This commit is contained in:
街角小林
parent
bbb21d4e76
commit
2fe804880f
4
simple-mind-map/package-lock.json
generated
4
simple-mind-map/package-lock.json
generated
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.9.2",
|
||||
"version": "0.9.4",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "0.9.2",
|
||||
"version": "0.9.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
|
||||
@ -143,7 +143,8 @@ export default {
|
||||
openMiniMap: 'Open mini map',
|
||||
closeMiniMap: 'Close mini map',
|
||||
readonly: 'Change to eadonly',
|
||||
edit: 'Change to edit'
|
||||
edit: 'Change to edit',
|
||||
backToRoot: 'Back to root node'
|
||||
},
|
||||
nodeHyperlink: {
|
||||
title: 'Link',
|
||||
|
||||
@ -141,7 +141,8 @@ export default {
|
||||
openMiniMap: '开启小地图',
|
||||
closeMiniMap: '关闭小地图',
|
||||
readonly: '切换为只读模式',
|
||||
edit: '切换为编辑模式'
|
||||
edit: '切换为编辑模式',
|
||||
backToRoot: '回到根节点'
|
||||
},
|
||||
nodeHyperlink: {
|
||||
title: '超链接',
|
||||
|
||||
@ -3,17 +3,18 @@
|
||||
class="nodeExportDialog"
|
||||
:title="$t('export.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="700px"
|
||||
v-loading.fullscreen.lock="loading"
|
||||
:element-loading-text="loadingText"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
:width="isMobile ? '90%' : '50%'"
|
||||
:top="isMobile? '20px' : '15vh'"
|
||||
>
|
||||
<div class="exportContainer" :class="{ isDark: isDark }">
|
||||
<div class="nameInputBox">
|
||||
<span class="name">{{ $t('export.filename') }}</span>
|
||||
<el-input
|
||||
style="width: 300px"
|
||||
style="max-width: 300px"
|
||||
v-model="fileName"
|
||||
size="mini"
|
||||
@keydown.native.stop
|
||||
@ -29,30 +30,33 @@
|
||||
class="paddingInputBox"
|
||||
v-show="['svg', 'png', 'pdf'].includes(exportType)"
|
||||
>
|
||||
<span class="name">{{ $t('export.paddingX') }}</span>
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
v-model="paddingX"
|
||||
size="mini"
|
||||
@change="onPaddingChange"
|
||||
@keydown.native.stop
|
||||
></el-input>
|
||||
<span class="name" style="margin-left: 10px;">{{
|
||||
$t('export.paddingY')
|
||||
}}</span>
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
v-model="paddingY"
|
||||
size="mini"
|
||||
@change="onPaddingChange"
|
||||
@keydown.native.stop
|
||||
></el-input>
|
||||
<el-checkbox
|
||||
v-show="['png', 'pdf'].includes(exportType)"
|
||||
v-model="isTransparent"
|
||||
style="margin-left: 12px"
|
||||
>{{ $t('export.isTransparent') }}</el-checkbox
|
||||
>
|
||||
<div class="paddingInputGroup">
|
||||
<span class="name">{{ $t('export.paddingX') }}</span>
|
||||
<el-input
|
||||
style="max-width: 100px"
|
||||
v-model="paddingX"
|
||||
size="mini"
|
||||
@change="onPaddingChange"
|
||||
@keydown.native.stop
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="paddingInputGroup">
|
||||
<span class="name">{{ $t('export.paddingY') }}</span>
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
v-model="paddingY"
|
||||
size="mini"
|
||||
@change="onPaddingChange"
|
||||
@keydown.native.stop
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="paddingInputGroup">
|
||||
<el-checkbox
|
||||
v-show="['png', 'pdf'].includes(exportType)"
|
||||
v-model="isTransparent"
|
||||
>{{ $t('export.isTransparent') }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="downloadTypeList">
|
||||
<div
|
||||
@ -83,6 +87,7 @@
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { downTypeList } from '@/config'
|
||||
import { isMobile } from 'simple-mind-map/src/utils/index'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -101,7 +106,8 @@ export default {
|
||||
loading: false,
|
||||
loadingText: '',
|
||||
paddingX: 10,
|
||||
paddingY: 10
|
||||
paddingY: 10,
|
||||
isMobile: isMobile()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -176,7 +182,13 @@ export default {
|
||||
this.isTransparent
|
||||
)
|
||||
} else if (this.exportType === 'pdf') {
|
||||
this.$bus.$emit('export', this.exportType, true, this.fileName, this.isTransparent)
|
||||
this.$bus.$emit(
|
||||
'export',
|
||||
this.exportType,
|
||||
true,
|
||||
this.fileName,
|
||||
this.isTransparent
|
||||
)
|
||||
} else {
|
||||
this.$bus.$emit('export', this.exportType, true, this.fileName)
|
||||
}
|
||||
@ -221,7 +233,18 @@ export default {
|
||||
}
|
||||
|
||||
.paddingInputBox {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.paddingInputGroup {
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
@ -260,6 +283,7 @@ export default {
|
||||
.icon {
|
||||
font-size: 30px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.png {
|
||||
color: #ffc038;
|
||||
@ -287,15 +311,26 @@ export default {
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.name {
|
||||
color: #1a1a1a;
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
display: -webkit-box; /* 必须设置display属性为-webkit-box */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
-webkit-line-clamp: 2; /* 限制显示两行 */
|
||||
-webkit-box-orient: vertical; /* 垂直方向上的换行 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
class="navigatorBox"
|
||||
:class="{ isDark: isDark }"
|
||||
ref="navigatorBox"
|
||||
:style="{ width: width + 'px' }"
|
||||
@mousedown="onMousedown"
|
||||
@mousemove="onMousemove"
|
||||
@mouseup="onMouseup"
|
||||
@ -47,25 +48,31 @@ export default {
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
mindMapImg: ''
|
||||
mindMapImg: '',
|
||||
width: 0,
|
||||
setSizeTimer: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['isDark'])
|
||||
},
|
||||
mounted() {
|
||||
this.setSize()
|
||||
window.addEventListener('resize', this.setSize)
|
||||
this.$bus.$on('toggle_mini_map', this.toggle_mini_map)
|
||||
this.$bus.$on('data_change', this.data_change)
|
||||
this.$bus.$on('view_data_change', this.data_change)
|
||||
this.$bus.$on('node_tree_render_end', this.data_change)
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.setSize)
|
||||
this.$bus.$off('toggle_mini_map', this.toggle_mini_map)
|
||||
this.$bus.$off('data_change', this.data_change)
|
||||
this.$bus.$off('view_data_change', this.data_change)
|
||||
this.$bus.$off('node_tree_render_end', this.data_change)
|
||||
},
|
||||
methods: {
|
||||
// 切换显示小地图
|
||||
toggle_mini_map(show) {
|
||||
this.showMiniMap = show
|
||||
this.$nextTick(() => {
|
||||
@ -77,6 +84,8 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 思维导图数据改变，更新小地图
|
||||
data_change() {
|
||||
if (!this.showMiniMap) {
|
||||
return
|
||||
@ -86,6 +95,22 @@ export default {
|
||||
this.drawMiniMap()
|
||||
}, 500)
|
||||
},
|
||||
|
||||
// 计算容器宽度
|
||||
setSize() {
|
||||
clearTimeout(this.setSizeTimer)
|
||||
this.setSizeTimer = setTimeout(() => {
|
||||
this.width = Math.min(window.innerWidth - 80, 370)
|
||||
this.$nextTick(() => {
|
||||
if (this.showMiniMap) {
|
||||
this.init()
|
||||
this.drawMiniMap()
|
||||
}
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
|
||||
// 获取宽高
|
||||
init() {
|
||||
let { width, height } = this.$refs.navigatorBox.getBoundingClientRect()
|
||||
this.boxWidth = width
|
||||
@ -128,7 +153,6 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.navigatorBox {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
height: 220px;
|
||||
background-color: #fff;
|
||||
bottom: 80px;
|
||||
|
||||
@ -15,6 +15,15 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="$t('navigatorToolbar.backToRoot')"
|
||||
placement="top"
|
||||
>
|
||||
<div class="btn iconfont icondingwei" @click="backToRoot"></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="btn iconfont iconsousuo" @click="showSearch"></div>
|
||||
</div>
|
||||
@ -180,6 +189,10 @@ export default {
|
||||
a.href = url
|
||||
a.target = '_blank'
|
||||
a.click()
|
||||
},
|
||||
|
||||
backToRoot() {
|
||||
this.mindMap.renderer.setRootNodeCenter()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
class="nodeHyperlinkDialog"
|
||||
:title="$t('nodeHyperlink.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
:width="isMobile ? '90%' : '50%'"
|
||||
:top="isMobile ? '20px' : '15vh'"
|
||||
>
|
||||
<div class="item">
|
||||
<span class="name">{{ $t('nodeHyperlink.link') }}</span>
|
||||
@ -41,6 +42,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isMobile } from 'simple-mind-map/src/utils/index'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-06-24 22:53:17
|
||||
@ -54,7 +57,8 @@ export default {
|
||||
link: '',
|
||||
linkTitle: '',
|
||||
activeNodes: [],
|
||||
protocol: 'https'
|
||||
protocol: 'https',
|
||||
isMobile: isMobile()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
class="nodeImageDialog"
|
||||
:title="$t('nodeImage.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
:width="isMobile ? '90%' : '50%'"
|
||||
:top="isMobile ? '20px' : '15vh'"
|
||||
>
|
||||
<div class="title">方式一</div>
|
||||
<ImgUpload
|
||||
@ -37,7 +38,7 @@
|
||||
|
||||
<script>
|
||||
import ImgUpload from '@/components/ImgUpload'
|
||||
import { getImageSize } from 'simple-mind-map/src/utils/index'
|
||||
import { getImageSize, isMobile } from 'simple-mind-map/src/utils/index'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -55,7 +56,8 @@ export default {
|
||||
img: '',
|
||||
imgUrl: '',
|
||||
imgTitle: '',
|
||||
activeNodes: null
|
||||
activeNodes: null,
|
||||
isMobile: isMobile()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
class="nodeNoteDialog"
|
||||
:title="$t('nodeNote.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
:width="isMobile ? '90%' : '50%'"
|
||||
:top="isMobile ? '20px' : '15vh'"
|
||||
>
|
||||
<!-- <el-input
|
||||
type="textarea"
|
||||
@ -26,6 +27,7 @@
|
||||
<script>
|
||||
import Editor from '@toast-ui/editor'
|
||||
import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
|
||||
import { isMobile } from 'simple-mind-map/src/utils/index'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -39,7 +41,8 @@ export default {
|
||||
dialogVisible: false,
|
||||
note: '',
|
||||
activeNodes: [],
|
||||
editor: null
|
||||
editor: null,
|
||||
isMobile: isMobile()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
class="nodeTagDialog"
|
||||
:title="$t('nodeTag.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
:width="isMobile ? '90%' : '50%'"
|
||||
:top="isMobile ? '20px' : '15vh'"
|
||||
>
|
||||
<el-input
|
||||
v-model="tag"
|
||||
@ -39,7 +40,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { generateColorByContent } from 'simple-mind-map/src/utils/index'
|
||||
import { generateColorByContent, isMobile } from 'simple-mind-map/src/utils/index'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -54,7 +55,8 @@ export default {
|
||||
tagArr: [],
|
||||
tag: '',
|
||||
activeNodes: [],
|
||||
max: 5
|
||||
max: 5,
|
||||
isMobile: isMobile()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
width="120"
|
||||
trigger="hover"
|
||||
v-if="showMoreBtn"
|
||||
style="margin-left: 20px;"
|
||||
:style="{ marginLeft: horizontalList.length > 0 ? '20px' : 0 }"
|
||||
>
|
||||
<ToolbarNodeBtnList
|
||||
dir="v"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user