Demo:扩展节点图标列表

This commit is contained in:
wanglin2 2023-04-25 09:05:46 +08:00
parent 5e865a4e33
commit f5f665ec0a
3 changed files with 84 additions and 3 deletions

64
web/src/config/icon.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -48,6 +48,7 @@ import NodeImgPreview from './NodeImgPreview.vue'
import SidebarTrigger from './SidebarTrigger.vue' import SidebarTrigger from './SidebarTrigger.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import customThemeList from '@/customThemes' import customThemeList from '@/customThemes'
import icon from '@/config/icon'
// //
MindMap MindMap
@ -287,7 +288,8 @@ export default {
// this.$bus.$emit('hideNoteContent') // this.$bus.$emit('hideNoteContent')
} }
}, },
...(config || {}) ...(config || {}),
iconList: icon
}) })
if (this.openNodeRichText) this.addRichTextPlugin() if (this.openNodeRichText) this.addRichTextPlugin()
this.mindMap.keyCommand.addShortcut('Control+s', () => { this.mindMap.keyCommand.addShortcut('Control+s', () => {

View File

@ -12,7 +12,7 @@
class="icon" class="icon"
v-for="icon in item.list" v-for="icon in item.list"
:key="icon.name" :key="icon.name"
v-html="icon.icon" v-html="getHtml(icon.icon)"
:class="{ :class="{
selected: iconList.includes(item.type + '_' + icon.name) selected: iconList.includes(item.type + '_' + icon.name)
}" }"
@ -25,6 +25,7 @@
<script> <script>
import { nodeIconList } from 'simple-mind-map/src/svg/icons' import { nodeIconList } from 'simple-mind-map/src/svg/icons'
import icon from '@/config/icon'
/** /**
* @Author: 王林 * @Author: 王林
@ -35,7 +36,7 @@ export default {
name: 'NodeIcon', name: 'NodeIcon',
data() { data() {
return { return {
nodeIconList, nodeIconList: [...nodeIconList, ...icon],
dialogVisible: false, dialogVisible: false,
iconList: [], iconList: [],
activeNodes: [] activeNodes: []
@ -56,6 +57,10 @@ export default {
}) })
}, },
methods: { methods: {
getHtml(icon) {
return /^<svg/.test(icon) ? icon : `<img src="${icon}" />`
},
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-23 23:16:56 * @Date: 2021-06-23 23:16:56
@ -119,6 +124,16 @@ export default {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
/deep/ img {
width: 100%;
height: 100%;
}
/deep/ svg {
width: 100%;
height: 100%;
}
&.selected { &.selected {
&::after { &::after {
content: ''; content: '';