mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-23 19:37:44 +08:00
Merge branch 'feature' into main
This commit is contained in:
wanglin2
commit
fabf4535a8
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.2313b4b8.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.2c02cf1a.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.6d16a18f.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.fcf43a73.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.4e43a508.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.2151bd9a.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a1773017.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.106affda.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.40c3a4c6.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.bd367278.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.1d4a5492.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.1ed97f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.cad55829.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.bc2402de.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.8e142e17.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.5e69748f.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.2b0a3aa0.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.41f869ae.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.d27d7537.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a826dbb3.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.53817128.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.a1a1527a.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.cfa871f6.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.5d901d78.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.10ad3333.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.a4748b26.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.d8e94894.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.2bb0ee69.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f8eea9ae.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5f8f761a.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.25303766.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.428d2cf2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.6c3450dd.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.c0f37d58.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.390e6ae8.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.9892f94d.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.76d5e91c.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.a56e89cb.js" rel="prefetch"><link href="dist/js/chunk-2d216004.6bc315a8.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.ef0d247a.js" rel="prefetch"><link href="dist/js/chunk-2d217907.fcb88ac3.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.4ed5fff9.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.6c80e04d.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.20c08643.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.c6cec8ad.js" rel="prefetch"><link href="dist/js/chunk-2d238428.816b9c47.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.057b1a50.js" rel="prefetch"><link href="dist/css/app.8011b75a.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.fc6ae134.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.8011b75a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.fc6ae134.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.2313b4b8.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.2c02cf1a.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.6d16a18f.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.fcf43a73.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.4e43a508.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.2151bd9a.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a1773017.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.106affda.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.40c3a4c6.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.bd367278.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.1d4a5492.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.1ed97f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.e3dec256.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.cad55829.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.bc2402de.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.8e142e17.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.5e69748f.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.2b0a3aa0.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.41f869ae.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.d27d7537.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a826dbb3.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.d6ccf037.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.53817128.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.a1a1527a.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.cfa871f6.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.5d901d78.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.10ad3333.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.a4748b26.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.d8e94894.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.2bb0ee69.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f8eea9ae.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5f8f761a.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.25303766.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.428d2cf2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.6c3450dd.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.c0f37d58.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.390e6ae8.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.9892f94d.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.76d5e91c.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.a56e89cb.js" rel="prefetch"><link href="dist/js/chunk-2d216004.6bc315a8.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.667b0cef.js" rel="prefetch"><link href="dist/js/chunk-2d217907.fcb88ac3.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.4ed5fff9.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.6c80e04d.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.20c08643.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.c6cec8ad.js" rel="prefetch"><link href="dist/js/chunk-2d238428.816b9c47.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.057b1a50.js" rel="prefetch"><link href="dist/css/app.d88d1f43.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.75db2ad4.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.d88d1f43.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.75db2ad4.js"></script></body></html>
|
||||
@ -11,7 +11,7 @@ let langList = [
|
||||
}
|
||||
]
|
||||
let StartList = ['introduction', 'start', 'translate', 'changelog']
|
||||
let CourseList = new Array(3).fill(0).map((_, index) => {
|
||||
let CourseList = new Array(5).fill(0).map((_, index) => {
|
||||
return 'course' + (index + 1)
|
||||
})
|
||||
let APIList = [
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
|
||||
export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"course1","title":"基本使用"},{"path":"course2","title":"操作节点内容"},{"path":"course3","title":"插入/删除节点、前进回退"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"markdown","title":"Markdown解析"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"markdown","title":"Markdown parse"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
|
||||
export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"course1","title":"基本使用"},{"path":"course2","title":"操作节点内容"},{"path":"course3","title":"插入/删除节点、前进回退"},{"path":"course4","title":"设置节点样式"},{"path":"course5","title":"设置基础样式"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"markdown","title":"Markdown解析"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"markdown","title":"Markdown parse"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
|
||||
|
||||
@ -178,6 +178,6 @@ mindMap.associativeLine.createLineFromActiveNode()
|
||||
|
||||
然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
|
||||
|
||||
## 完整实例
|
||||
## 完整示例
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV/9PHEUU/1cma8we5tiDRmKCBykFRBJAQ5poZRuy7M7dDezObHfn4AghsVRK0Vb6xWjTRq2mraYqaULTCA3wz7B3x3/hm539dsdhzvhDSQ5m3rzPe+/el88Ma8qI62rLVawMKkXf9IjLkY951R3WKXFc5nG0hjxcyiNGp1mVcmzlkV8xbJutzOISWkcljzlIBQtqgpgm1Jo2XHmkKz6IbdzrgLTXMVxd0SlCOrUxR0ImNIcQrdq2lBcKKDh8EGzfqR9/WX/1pvHoq+bXG42N/eDWD81fftepyajPkWFysoxnmIV9QKcR5eau9ug0tFLfuR9sPgseHzW2t2IYoT72Jh2jjAGV60FDw2hNuM2Y05YNu4q1EvPGDbOSy1EQpooIib0GOQqt5CKh+Kl69iBSK5y7/mChYNeuUX/V15jv95q0dwGTRULLmmGT1So1fc1kTuGaXSvUKhdGPl+6VLviDCxO4IHS2Adjn13xRgcWNJeW1XxqnhNuY3AgvxCkpf5k6/TXh/Vb39d3dprHL7O6K8TilUHU39eXF+mMEcHu4ekfD0/2fz75+07zxmHw8l4KqWBSrvAQI4XrIo9c/F5vTyh4bkkon4RNa0KjU/gzRWAxhOZU1yPMI3x1vl/No3R3Qb367xUQCe+Uf7Cdix2cE2vz9ebpg6P6t89aw50idKnb+p/j/eNVF3s22MmFFc8UXBRWfMHG3Zv1G3unP94P9l8Fuz+dvrgd7D5Vz0vq0636XtLcMsoZxrvu0nOiFCZyqjQe3NwMdvfPCwBK2vjrqDWAy0b5f/oHC7k5VdoOqy6XUPLzwni+0Xx+vTWMCaM1iog0NFzD5ihzHINaOXVkbGx+YnxmfHZkavKLkcuTn8yAu1Bd5xzXoLHV5taLYPfRyf62dBLlQ6h0qMfmXvP6d42D4zON01aSOBjD95lJDJEfoaSZHjZ4uPwIWHAkSVwudpXwae6sNcGHeCXm0ZhjMNCLxcyqgynXypiP21gsL61OwvePkKOMcgOcempPRAeWwY3BuC6QDUUIdCUjkmKRJCHWlfqTfcm4kqlDLki4RVfMCrEtD1OhPJfaaDPX0Uu7p5OD242D39qdtTrs4DTki7N6bymCeBnJYhyhhM8yBiNo4U+ZTzhhFJCqjUtcTIIJpYMyhaj1ng/l3YcQdGDj8b3g7p8yJnkHnhx8c/LmdbbdgPpUMWTzciTBYDiC+XDyQkLMTOOZsRX9Fekl7Q+fYkG+AODuhw3HcG1DD8MOoaJFlpFpQ5cP6UoUxBh2mK6Ex5ECsdLTpBNBpViA06xibIkzZi8YoIKWe0kJBNlQbUzLvIKGUV/iRefFhSrncNlcNG1iLgEivdFBK3vlFwtSNYKC547Q8B7JQoGiuoWKeySBJndNt2hBzqnjkKO7hQKvJkhJqd0iJ2AmYmBIg//hu2aijemxDZ0WOl4VC5k+gq3PV23ZUhej16KuaAX5RIz4TsO+o5m+ryvJVGiZlou7On3jvBvqIeQmY+Zh8AiNFB6EEyo+77S3ZmwqBRoLPrOrXAIREsM6iPqiHWduujnrPn5Bvd/X59Ziz539vhd7dgyvTMBvbNU1LAueibEgCV2LJqXLiPvjCKKgkz0YhCkPa6DkFVkB8SjXFn1G4X8AeWNGB1CBhD51BZ74kjO1Aiw1Dy4v4mBRrN4Fj61Aj4ARXYnor8OzX2LPllqgotjWlfV/AEgelAo=" />
|
||||
@ -115,7 +115,7 @@ activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">
|
||||
<pre class="hljs"><code>mindMap.associativeLine.createLineFromActiveNode()
|
||||
</code></pre>
|
||||
<p>然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。</p>
|
||||
<h2>完整实例</h2>
|
||||
<h2>完整示例</h2>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV/9PHEUU/1cma8we5tiDRmKCBykFRBJAQ5poZRuy7M7dDezObHfn4AghsVRK0Vb6xWjTRq2mraYqaULTCA3wz7B3x3/hm539dsdhzvhDSQ5m3rzPe+/el88Ma8qI62rLVawMKkXf9IjLkY951R3WKXFc5nG0hjxcyiNGp1mVcmzlkV8xbJutzOISWkcljzlIBQtqgpgm1Jo2XHmkKz6IbdzrgLTXMVxd0SlCOrUxR0ImNIcQrdq2lBcKKDh8EGzfqR9/WX/1pvHoq+bXG42N/eDWD81fftepyajPkWFysoxnmIV9QKcR5eau9ug0tFLfuR9sPgseHzW2t2IYoT72Jh2jjAGV60FDw2hNuM2Y05YNu4q1EvPGDbOSy1EQpooIib0GOQqt5CKh+Kl69iBSK5y7/mChYNeuUX/V15jv95q0dwGTRULLmmGT1So1fc1kTuGaXSvUKhdGPl+6VLviDCxO4IHS2Adjn13xRgcWNJeW1XxqnhNuY3AgvxCkpf5k6/TXh/Vb39d3dprHL7O6K8TilUHU39eXF+mMEcHu4ekfD0/2fz75+07zxmHw8l4KqWBSrvAQI4XrIo9c/F5vTyh4bkkon4RNa0KjU/gzRWAxhOZU1yPMI3x1vl/No3R3Qb367xUQCe+Uf7Cdix2cE2vz9ebpg6P6t89aw50idKnb+p/j/eNVF3s22MmFFc8UXBRWfMHG3Zv1G3unP94P9l8Fuz+dvrgd7D5Vz0vq0636XtLcMsoZxrvu0nOiFCZyqjQe3NwMdvfPCwBK2vjrqDWAy0b5f/oHC7k5VdoOqy6XUPLzwni+0Xx+vTWMCaM1iog0NFzD5ihzHINaOXVkbGx+YnxmfHZkavKLkcuTn8yAu1Bd5xzXoLHV5taLYPfRyf62dBLlQ6h0qMfmXvP6d42D4zON01aSOBjD95lJDJEfoaSZHjZ4uPwIWHAkSVwudpXwae6sNcGHeCXm0ZhjMNCLxcyqgynXypiP21gsL61OwvePkKOMcgOcempPRAeWwY3BuC6QDUUIdCUjkmKRJCHWlfqTfcm4kqlDLki4RVfMCrEtD1OhPJfaaDPX0Uu7p5OD242D39qdtTrs4DTki7N6bymCeBnJYhyhhM8yBiNo4U+ZTzhhFJCqjUtcTIIJpYMyhaj1ng/l3YcQdGDj8b3g7p8yJnkHnhx8c/LmdbbdgPpUMWTzciTBYDiC+XDyQkLMTOOZsRX9Fekl7Q+fYkG+AODuhw3HcG1DD8MOoaJFlpFpQ5cP6UoUxBh2mK6Ex5ECsdLTpBNBpViA06xibIkzZi8YoIKWe0kJBNlQbUzLvIKGUV/iRefFhSrncNlcNG1iLgEivdFBK3vlFwtSNYKC547Q8B7JQoGiuoWKeySBJndNt2hBzqnjkKO7hQKvJkhJqd0iJ2AmYmBIg//hu2aijemxDZ0WOl4VC5k+gq3PV23ZUhej16KuaAX5RIz4TsO+o5m+ryvJVGiZlou7On3jvBvqIeQmY+Zh8AiNFB6EEyo+77S3ZmwqBRoLPrOrXAIREsM6iPqiHWduujnrPn5Bvd/X59Ziz539vhd7dgyvTMBvbNU1LAueibEgCV2LJqXLiPvjCKKgkz0YhCkPa6DkFVkB8SjXFn1G4X8AeWNGB1CBhD51BZ74kjO1Aiw1Dy4v4mBRrN4Fj61Aj4ARXYnor8OzX2LPllqgotjWlfV/AEgelAo=" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
235
web/src/pages/Doc/zh/course4/index.md
Normal file
235
web/src/pages/Doc/zh/course4/index.md
Normal file
@ -0,0 +1,235 @@
|
||||
# 设置节点样式
|
||||
|
||||
本节将介绍如何更新当前激活节点的样式。
|
||||
|
||||
样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是`setStyle`方法，通过第三个参数进行指定：
|
||||
|
||||
```js
|
||||
// 设置常态样式
|
||||
node.setStyle('样式属性', '样式值')
|
||||
|
||||
// 设置激活样式
|
||||
node.setStyle('样式属性', '样式值', true)
|
||||
```
|
||||
|
||||
## 设置常态样式
|
||||
|
||||
### 设置文字样式
|
||||
|
||||
文字样式目前支持：`字体`、`字号`、`行高`、`颜色`、`加粗`、`斜体`、`划线`。
|
||||
|
||||
这些样式选择的UI界面都需要你自行开发，然后调用节点的`setStyle`方法更新。
|
||||
|
||||
同样首先需要监听节点的激活事件来换取当前激活的节点：
|
||||
|
||||
```js
|
||||
const activeNodes = shallowRef([])
|
||||
mindMap.on('node_active', (node, activeNodeList) => {
|
||||
activeNodes.value = activeNodeList
|
||||
})
|
||||
```
|
||||
|
||||
```js
|
||||
// 设置字体
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('fontFamily', '宋体, SimSun, Songti SC')
|
||||
})
|
||||
|
||||
// 设置字号
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('fontSize', 16)
|
||||
})
|
||||
|
||||
// 设置行高
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('lineHeight', 1.5)
|
||||
})
|
||||
|
||||
// 设置颜色
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('color', '#fff')
|
||||
})
|
||||
|
||||
// 设置加粗
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('fontWeight', 'bold')// node.setStyle('fontWeight', 'normal')
|
||||
})
|
||||
|
||||
// 设置划线
|
||||
activeNodes.value.forEach(node => {
|
||||
// 下划线
|
||||
node.setStyle('textDecoration', 'underline')
|
||||
// 删除线
|
||||
node.setStyle('textDecoration', 'line-through')
|
||||
// 上划线
|
||||
node.setStyle('textDecoration', 'overline')
|
||||
})
|
||||
```
|
||||
|
||||
### 设置边框样式
|
||||
|
||||
边框样式支持设置：`颜色`、`虚线`、`线宽`、`圆角`。
|
||||
|
||||
设置边框样式前请先检查线宽是否被设置成了0。
|
||||
|
||||
```js
|
||||
// 设置边框颜色
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderColor', '#000')
|
||||
})
|
||||
|
||||
// 设置边框虚线
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderDasharray', '5,5')// node.setStyle('borderDasharray', 'none')
|
||||
})
|
||||
|
||||
// 设置边框宽度
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderWidth', 2)
|
||||
})
|
||||
|
||||
// 设置边框圆角
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderRadius', 5)
|
||||
})
|
||||
```
|
||||
|
||||
### 设置背景样式
|
||||
|
||||
背景样式也就是背景颜色。
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('fillColor', '#fff')
|
||||
})
|
||||
```
|
||||
|
||||
### 设置形状样式
|
||||
|
||||
目前支持以下形状：
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
name: '矩形',
|
||||
value: 'rectangle'
|
||||
},
|
||||
{
|
||||
name: '菱形',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
name: '平行四边形',
|
||||
value: 'parallelogram'
|
||||
},
|
||||
{
|
||||
name: '圆角矩形',
|
||||
value: 'roundedRectangle'
|
||||
},
|
||||
{
|
||||
name: '八角矩形',
|
||||
value: 'octagonalRectangle'
|
||||
},
|
||||
{
|
||||
name: '外三角矩形',
|
||||
value: 'outerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: '内三角矩形',
|
||||
value: 'innerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: '椭圆',
|
||||
value: 'ellipse'
|
||||
},
|
||||
{
|
||||
name: '圆',
|
||||
value: 'circle'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
设置形状前请先确认边框宽度是否被设置成了0。
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('shape', 'circle')
|
||||
})
|
||||
```
|
||||
|
||||
### 设置线条样式
|
||||
|
||||
节点线条支持设置：`颜色`、`虚线`、`线宽`。
|
||||
|
||||
```js
|
||||
// 设置线条颜色
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('lineColor', '#000')
|
||||
})
|
||||
|
||||
// 设置线条虚线
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('lineDasharray', '5, 5, 1, 5')// node.setStyle('lineDasharray', 'none')
|
||||
})
|
||||
|
||||
// 设置线条宽度
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('lineWidth', 3)
|
||||
})
|
||||
```
|
||||
|
||||
### 设置节点内边距
|
||||
|
||||
节点内边距支持设置水平和垂直方向的内边距。
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('paddingX', 50)
|
||||
node.setStyle('paddingY', 50)
|
||||
})
|
||||
```
|
||||
|
||||
## 设置激活样式
|
||||
|
||||
激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：
|
||||
|
||||
```js
|
||||
import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
|
||||
|
||||
const checkIsSupportActive = (prop) => {
|
||||
return supportActiveStyle.includes(prop)
|
||||
}
|
||||
```
|
||||
|
||||
其他和数值常态样式是一样的，只需要给`setStyle`方法传入第三个参数：
|
||||
|
||||
```js
|
||||
// 设置边框颜色
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderColor', '#000', true)
|
||||
})
|
||||
|
||||
// 设置边框虚线
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderDasharray', '5,5', true)// node.setStyle('borderDasharray', 'none', true)
|
||||
})
|
||||
|
||||
// 设置边框宽度
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderWidth', 2, true)
|
||||
})
|
||||
|
||||
// 设置边框圆角
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('borderRadius', 5, true)
|
||||
})
|
||||
|
||||
// 设置背景颜色
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setStyle('fillColor', '#fff', true)
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV91uG0UUfpXRVmgd5KwdIFwYJypNikBqUBUjFdSt0Hh3bA/MzqxmZ52GyBIqUKAtAlSJClClhhu4gHCDqJI27cvEP4/RM/tfex35wlKj2N6Z+b5zzsz55szsgfGu71v9kBgNoxk4kvoKBUSF/qbNqecLqdABkqRTRYLviJAr4lZR0MOMib1d0kED1JHCQyZYMDPGDuXuDvbjIdsIoJuRVQ96Vz3s24bNEbI5IwrpPo3cQDxkzOY2r9XQ8PT+8PsfRs+/HP33ZPzb15M7t8a3joffPZgc/mVzR/BAIewo2icfCpcEwM3jqVy/sZJYmRw9G58ejX75dvjPg9Gjx8OnP6ZkmN9H5KZqqX1GgF1ZQRub6EAHVTBr9TELidUR8jJ2ehUOfRkMId20wE5ko2J2BFfvYY+yfbOKzOHR3bPT+1XUol4r5PAreFdR1NoyIbY57Bb9ggB37e1yCKOcvE9ot6c0yFovRzmCCakjkMQ9x9e11JDZFmweUMEKbRNHSKyo4BqsY1hVPSnCbk+TbDWA78FLyz15djw6vD2z3JeEdIlc4oK3I4Nb6Xwv1Ov1OfOIkdsYNCIljvKzXl0/F3yNuqoHwDfOA+1il4YBoHQuSpfiq3ujX/8tLkJ3SWKjjGUzbwNvXjKGp3+M7/xfiKDVw/6SEgDL6WvBmg6VDpsbwvjk+ejh4YweroCUlqgGrcxFtKBxU0pA8L8G3+cwUjm8OW+Zb38Dsp88fliY4FXsupQvKeF+bOxjLbZ6eZwJ5JMUUogzq9uVQiiFukv20npdSdwT1kCucEKPcGV1ibrMiH68tP+BWzET5hbUEQyLI82VasxyscKNdAZQ3w3dYRuFrrhbFxbdbRujR8dxbY9PBP03SIxpoNOjzJWEa/D13MaUuVIv057OTu6NT/6cdvaywxKnN/KxIu4VRZA+Jn0pj3KqdoVQWldXRUB1uQamyUgnqvEOpA7SFLEGK+/EZy9CIN/x7z8Pf/o7jik+bc9O7p49gYqRCcQSvGJqrX0aixcMRmKtRgK8QgOVa6pE4FpfCS52D5qET7MW3zTgjgENReB6gBWBFkJNl/aRw3AQbNhGEsQ28YRtRMMJgLr5aKZEgDRrMFoEppaUEKyNAYL6q7QDHcVQGYHzuYc2UT3zYqtmO1RKcHTRYdT5HBjFWwPgZq8XzVpMSUxABCUmCidhZqR4aC5mpJtzo1NmIVZU/TNifDgsRMyqdUYulvWFTCT1MPee1swpdp7A9KlZK+gDmoEOJEJcTG6btmHV4itmUscsEniWEwS2kandKkgpVeuerusNtFavvxbhEPKz7SMJeASBRAPRztOfC9OSS03lRNwOBAtVTERIb8IGqictJfy8Meu+F93LGuitet2/mXou9/t66tnDskvBb2o1OQjSjix0K9kBC0a8lkaQBJ21wSDs3igHRtWIM6Av9dZngeDwDhGZt5MByEBWFm0DXhHiWmjV4NGScChRj+hkrbal2AuIBCO2kZS1kteGmDubas1KYhsYgxcal4r4" />
|
||||
203
web/src/pages/Doc/zh/course4/index.vue
Normal file
203
web/src/pages/Doc/zh/course4/index.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>设置节点样式</h1>
|
||||
<p>本节将介绍如何更新当前激活节点的样式。</p>
|
||||
<p>样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是<code>setStyle</code>方法，通过第三个参数进行指定：</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// 设置常态样式</span>
|
||||
node.setStyle(<span class="hljs-string">'样式属性'</span>, <span class="hljs-string">'样式值'</span>)
|
||||
|
||||
<span class="hljs-comment">// 设置激活样式</span>
|
||||
node.setStyle(<span class="hljs-string">'样式属性'</span>, <span class="hljs-string">'样式值'</span>, <span class="hljs-literal">true</span>)
|
||||
</code></pre>
|
||||
<h2>设置常态样式</h2>
|
||||
<h3>设置文字样式</h3>
|
||||
<p>文字样式目前支持：<code>字体</code>、<code>字号</code>、<code>行高</code>、<code>颜色</code>、<code>加粗</code>、<code>斜体</code>、<code>划线</code>。</p>
|
||||
<p>这些样式选择的UI界面都需要你自行开发，然后调用节点的<code>setStyle</code>方法更新。</p>
|
||||
<p>同样首先需要监听节点的激活事件来换取当前激活的节点：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> activeNodes = shallowRef([])
|
||||
mindMap.on(<span class="hljs-string">'node_active'</span>, <span class="hljs-function">(<span class="hljs-params">node, activeNodeList</span>) =></span> {
|
||||
activeNodes.value = activeNodeList
|
||||
})
|
||||
</code></pre>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// 设置字体</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'fontFamily'</span>, <span class="hljs-string">'宋体, SimSun, Songti SC'</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置字号</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'fontSize'</span>, <span class="hljs-number">16</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置行高</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'lineHeight'</span>, <span class="hljs-number">1.5</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置颜色</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'color'</span>, <span class="hljs-string">'#fff'</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置加粗</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'fontWeight'</span>, <span class="hljs-string">'bold'</span>)<span class="hljs-comment">// node.setStyle('fontWeight', 'normal')</span>
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置划线</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
<span class="hljs-comment">// 下划线</span>
|
||||
node.setStyle(<span class="hljs-string">'textDecoration'</span>, <span class="hljs-string">'underline'</span>)
|
||||
<span class="hljs-comment">// 删除线</span>
|
||||
node.setStyle(<span class="hljs-string">'textDecoration'</span>, <span class="hljs-string">'line-through'</span>)
|
||||
<span class="hljs-comment">// 上划线</span>
|
||||
node.setStyle(<span class="hljs-string">'textDecoration'</span>, <span class="hljs-string">'overline'</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h3>设置边框样式</h3>
|
||||
<p>边框样式支持设置：<code>颜色</code>、<code>虚线</code>、<code>线宽</code>、<code>圆角</code>。</p>
|
||||
<p>设置边框样式前请先检查线宽是否被设置成了0。</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// 设置边框颜色</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderColor'</span>, <span class="hljs-string">'#000'</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置边框虚线</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderDasharray'</span>, <span class="hljs-string">'5,5'</span>)<span class="hljs-comment">// node.setStyle('borderDasharray', 'none')</span>
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置边框宽度</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderWidth'</span>, <span class="hljs-number">2</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置边框圆角</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderRadius'</span>, <span class="hljs-number">5</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h3>设置背景样式</h3>
|
||||
<p>背景样式也就是背景颜色。</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'fillColor'</span>, <span class="hljs-string">'#fff'</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h3>设置形状样式</h3>
|
||||
<p>目前支持以下形状：</p>
|
||||
<pre class="hljs"><code>[
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'矩形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'rectangle'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'菱形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'diamond'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'平行四边形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'parallelogram'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'圆角矩形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'roundedRectangle'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'八角矩形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'octagonalRectangle'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'外三角矩形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'outerTriangularRectangle'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'内三角矩形'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'innerTriangularRectangle'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'椭圆'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'ellipse'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'圆'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'circle'</span>
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
<p>设置形状前请先确认边框宽度是否被设置成了0。</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'shape'</span>, <span class="hljs-string">'circle'</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h3>设置线条样式</h3>
|
||||
<p>节点线条支持设置：<code>颜色</code>、<code>虚线</code>、<code>线宽</code>。</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// 设置线条颜色</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'lineColor'</span>, <span class="hljs-string">'#000'</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置线条虚线</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'lineDasharray'</span>, <span class="hljs-string">'5, 5, 1, 5'</span>)<span class="hljs-comment">// node.setStyle('lineDasharray', 'none')</span>
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置线条宽度</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'lineWidth'</span>, <span class="hljs-number">3</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h3>设置节点内边距</h3>
|
||||
<p>节点内边距支持设置水平和垂直方向的内边距。</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'paddingX'</span>, <span class="hljs-number">50</span>)
|
||||
node.setStyle(<span class="hljs-string">'paddingY'</span>, <span class="hljs-number">50</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置激活样式</h2>
|
||||
<p>激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> { supportActiveStyle } <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/themes/default'</span>
|
||||
|
||||
<span class="hljs-keyword">const</span> checkIsSupportActive = <span class="hljs-function">(<span class="hljs-params">prop</span>) =></span> {
|
||||
<span class="hljs-keyword">return</span> supportActiveStyle.includes(prop)
|
||||
}
|
||||
</code></pre>
|
||||
<p>其他和数值常态样式是一样的，只需要给<code>setStyle</code>方法传入第三个参数：</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// 设置边框颜色</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderColor'</span>, <span class="hljs-string">'#000'</span>, <span class="hljs-literal">true</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置边框虚线</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderDasharray'</span>, <span class="hljs-string">'5,5'</span>, <span class="hljs-literal">true</span>)<span class="hljs-comment">// node.setStyle('borderDasharray', 'none', true)</span>
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置边框宽度</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderWidth'</span>, <span class="hljs-number">2</span>, <span class="hljs-literal">true</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置边框圆角</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'borderRadius'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">true</span>)
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 设置背景颜色</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setStyle(<span class="hljs-string">'fillColor'</span>, <span class="hljs-string">'#fff'</span>, <span class="hljs-literal">true</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<h2>完整示例</h2>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV91uG0UUfpXRVmgd5KwdIFwYJypNikBqUBUjFdSt0Hh3bA/MzqxmZ52GyBIqUKAtAlSJClClhhu4gHCDqJI27cvEP4/RM/tfex35wlKj2N6Z+b5zzsz55szsgfGu71v9kBgNoxk4kvoKBUSF/qbNqecLqdABkqRTRYLviJAr4lZR0MOMib1d0kED1JHCQyZYMDPGDuXuDvbjIdsIoJuRVQ96Vz3s24bNEbI5IwrpPo3cQDxkzOY2r9XQ8PT+8PsfRs+/HP33ZPzb15M7t8a3joffPZgc/mVzR/BAIewo2icfCpcEwM3jqVy/sZJYmRw9G58ejX75dvjPg9Gjx8OnP6ZkmN9H5KZqqX1GgF1ZQRub6EAHVTBr9TELidUR8jJ2ehUOfRkMId20wE5ko2J2BFfvYY+yfbOKzOHR3bPT+1XUol4r5PAreFdR1NoyIbY57Bb9ggB37e1yCKOcvE9ot6c0yFovRzmCCakjkMQ9x9e11JDZFmweUMEKbRNHSKyo4BqsY1hVPSnCbk+TbDWA78FLyz15djw6vD2z3JeEdIlc4oK3I4Nb6Xwv1Ov1OfOIkdsYNCIljvKzXl0/F3yNuqoHwDfOA+1il4YBoHQuSpfiq3ujX/8tLkJ3SWKjjGUzbwNvXjKGp3+M7/xfiKDVw/6SEgDL6WvBmg6VDpsbwvjk+ejh4YweroCUlqgGrcxFtKBxU0pA8L8G3+cwUjm8OW+Zb38Dsp88fliY4FXsupQvKeF+bOxjLbZ6eZwJ5JMUUogzq9uVQiiFukv20npdSdwT1kCucEKPcGV1ibrMiH68tP+BWzET5hbUEQyLI82VasxyscKNdAZQ3w3dYRuFrrhbFxbdbRujR8dxbY9PBP03SIxpoNOjzJWEa/D13MaUuVIv057OTu6NT/6cdvaywxKnN/KxIu4VRZA+Jn0pj3KqdoVQWldXRUB1uQamyUgnqvEOpA7SFLEGK+/EZy9CIN/x7z8Pf/o7jik+bc9O7p49gYqRCcQSvGJqrX0aixcMRmKtRgK8QgOVa6pE4FpfCS52D5qET7MW3zTgjgENReB6gBWBFkJNl/aRw3AQbNhGEsQ28YRtRMMJgLr5aKZEgDRrMFoEppaUEKyNAYL6q7QDHcVQGYHzuYc2UT3zYqtmO1RKcHTRYdT5HBjFWwPgZq8XzVpMSUxABCUmCidhZqR4aC5mpJtzo1NmIVZU/TNifDgsRMyqdUYulvWFTCT1MPee1swpdp7A9KlZK+gDmoEOJEJcTG6btmHV4itmUscsEniWEwS2kandKkgpVeuerusNtFavvxbhEPKz7SMJeASBRAPRztOfC9OSS03lRNwOBAtVTERIb8IGqictJfy8Meu+F93LGuitet2/mXou9/t66tnDskvBb2o1OQjSjix0K9kBC0a8lkaQBJ21wSDs3igHRtWIM6Av9dZngeDwDhGZt5MByEBWFm0DXhHiWmjV4NGScChRj+hkrbal2AuIBCO2kZS1kteGmDubas1KYhsYgxcal4r4" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
219
web/src/pages/Doc/zh/course5/index.md
Normal file
219
web/src/pages/Doc/zh/course5/index.md
Normal file
@ -0,0 +1,219 @@
|
||||
# 设置基础样式
|
||||
|
||||
基础样式修改的其实是主题配置，所以会通过`setThemeConfig`方法设置。
|
||||
|
||||
## 设置背景
|
||||
|
||||
画布背景可以设置颜色或图片。
|
||||
|
||||
### 设置画布背景颜色
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
backgroundColor: '#A4DD00'
|
||||
})
|
||||
```
|
||||
|
||||
### 设置背景图片
|
||||
|
||||
背景图片还支持设置三个属性：`图片重复`、`图片位置`、`图片大小`。其实就是`css`的`background-repeat`、`background-position`、`background-size`三个属性。
|
||||
|
||||
不过导出为图片的时候背景图片的行为和`css`并不完全一致，因为导出是通过`canvas`实现的，而`canvas`并不存在这三个属性，所以是通过有限模拟`css`这三个属性行为实现的，详情可以阅读文章[如何在canvas中模拟css的背景图片样式](https://juejin.cn/post/7204854015463538744)。
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
backgroundImage: 'xxx.png',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center center',
|
||||
backgroundSize: 'cover'
|
||||
})
|
||||
```
|
||||
|
||||
`backgroundRepeat`支持设置的值如下：
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
name: '不重复',
|
||||
value: 'no-repeat'
|
||||
},
|
||||
{
|
||||
name: '重复',
|
||||
value: 'repeat'
|
||||
},
|
||||
{
|
||||
name: '水平方向重复',
|
||||
value: 'repeat-x'
|
||||
},
|
||||
{
|
||||
name: '垂直方向重复',
|
||||
value: 'repeat-y'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
`backgroundPosition`支持设置的值如下：
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
name: '默认',
|
||||
value: '0% 0%'
|
||||
},
|
||||
{
|
||||
name: '左上',
|
||||
value: 'left top'
|
||||
},
|
||||
{
|
||||
name: '左中',
|
||||
value: 'left center'
|
||||
},
|
||||
{
|
||||
name: '左下',
|
||||
value: 'left bottom'
|
||||
},
|
||||
{
|
||||
name: '右上',
|
||||
value: 'right top'
|
||||
},
|
||||
{
|
||||
name: '右中',
|
||||
value: 'right center'
|
||||
},
|
||||
{
|
||||
name: '右下',
|
||||
value: 'right bottom'
|
||||
},
|
||||
{
|
||||
name: '中上',
|
||||
value: 'center top'
|
||||
},
|
||||
{
|
||||
name: '居中',
|
||||
value: 'center center'
|
||||
},
|
||||
{
|
||||
name: '中下',
|
||||
value: 'center bottom'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
`backgroundSize`支持设置的值如下：
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
name: '自动',
|
||||
value: 'auto'
|
||||
},
|
||||
{
|
||||
name: '覆盖',
|
||||
value: 'cover'
|
||||
},
|
||||
{
|
||||
name: '保持',
|
||||
value: 'contain'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 设置连线样式
|
||||
|
||||
设置节点间的连线样式，支持：`颜色`、`粗细`、`虚线`、`风格`。
|
||||
|
||||
目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在`logicalStructure`逻辑结构图和`mindMap`思维导图两种结构时生效。
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
lineColor: '#009CE0',
|
||||
lineWidth: 3,
|
||||
lineDasharray: '15, 10, 5, 10, 15',
|
||||
lineStyle: 'curve'
|
||||
})
|
||||
```
|
||||
|
||||
## 设置概要的连线样式
|
||||
|
||||
概要节点前面会有一条弧线，它的颜色和粗细可以修改。
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
generalizationLineColor: '#FA28FF',
|
||||
generalizationLineWidth: 4
|
||||
})
|
||||
```
|
||||
|
||||
## 设置关联线的样式
|
||||
|
||||
> 关联线需要使用关联线插件
|
||||
|
||||
关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
associativeLineColor: '#FA28FF',
|
||||
associativeLineWidth: 4,
|
||||
associativeLineActiveColor: '#9F0500',
|
||||
associativeLineActiveWidth: 6
|
||||
})
|
||||
```
|
||||
|
||||
## 设置节点边框风格
|
||||
|
||||
默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
nodeUseLineStyle: true
|
||||
})
|
||||
```
|
||||
|
||||
## 设置节点内边距
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
paddingX: 30,
|
||||
paddingY: 20
|
||||
})
|
||||
```
|
||||
|
||||
## 设置节点内的图片最大的显示宽高
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
imgMaxWidth: 100,
|
||||
imgMaxHeight: 50
|
||||
})
|
||||
```
|
||||
|
||||
## 设置节点内图标的显示大小
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
iconSize: 30,
|
||||
})
|
||||
```
|
||||
|
||||
## 设置节点外边距
|
||||
|
||||
设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
// 二级节点样式
|
||||
second: {
|
||||
marginX: 30,
|
||||
marginY: 20
|
||||
},
|
||||
// 三级及以下节点样式
|
||||
node: {
|
||||
marginX: 40,
|
||||
marginY: 30
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#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" />
|
||||
182
web/src/pages/Doc/zh/course5/index.vue
Normal file
182
web/src/pages/Doc/zh/course5/index.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>设置基础样式</h1>
|
||||
<p>基础样式修改的其实是主题配置，所以会通过<code>setThemeConfig</code>方法设置。</p>
|
||||
<h2>设置背景</h2>
|
||||
<p>画布背景可以设置颜色或图片。</p>
|
||||
<h3>设置画布背景颜色</h3>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#A4DD00'</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h3>设置背景图片</h3>
|
||||
<p>背景图片还支持设置三个属性：<code>图片重复</code>、<code>图片位置</code>、<code>图片大小</code>。其实就是<code>css</code>的<code>background-repeat</code>、<code>background-position</code>、<code>background-size</code>三个属性。</p>
|
||||
<p>不过导出为图片的时候背景图片的行为和<code>css</code>并不完全一致，因为导出是通过<code>canvas</code>实现的，而<code>canvas</code>并不存在这三个属性，所以是通过有限模拟<code>css</code>这三个属性行为实现的，详情可以阅读文章<a href="https://juejin.cn/post/7204854015463538744">如何在canvas中模拟css的背景图片样式</a>。</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">backgroundImage</span>: <span class="hljs-string">'xxx.png'</span>,
|
||||
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">'no-repeat'</span>,
|
||||
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">'center center'</span>,
|
||||
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">'cover'</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p><code>backgroundRepeat</code>支持设置的值如下：</p>
|
||||
<pre class="hljs"><code>[
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'不重复'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'no-repeat'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'重复'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'repeat'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'水平方向重复'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'repeat-x'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'垂直方向重复'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'repeat-y'</span>
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
<p><code>backgroundPosition</code>支持设置的值如下：</p>
|
||||
<pre class="hljs"><code>[
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'默认'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'0% 0%'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'左上'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'left top'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'左中'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'left center'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'左下'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'left bottom'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'右上'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'right top'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'右中'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'right center'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'右下'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'right bottom'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'中上'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'center top'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'居中'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'center center'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'中下'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'center bottom'</span>
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
<p><code>backgroundSize</code>支持设置的值如下：</p>
|
||||
<pre class="hljs"><code>[
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'自动'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'auto'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'覆盖'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'cover'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'保持'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'contain'</span>
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
<h2>设置连线样式</h2>
|
||||
<p>设置节点间的连线样式，支持：<code>颜色</code>、<code>粗细</code>、<code>虚线</code>、<code>风格</code>。</p>
|
||||
<p>目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在<code>logicalStructure</code>逻辑结构图和<code>mindMap</code>思维导图两种结构时生效。</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">lineColor</span>: <span class="hljs-string">'#009CE0'</span>,
|
||||
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">3</span>,
|
||||
<span class="hljs-attr">lineDasharray</span>: <span class="hljs-string">'15, 10, 5, 10, 15'</span>,
|
||||
<span class="hljs-attr">lineStyle</span>: <span class="hljs-string">'curve'</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置概要的连线样式</h2>
|
||||
<p>概要节点前面会有一条弧线，它的颜色和粗细可以修改。</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">generalizationLineColor</span>: <span class="hljs-string">'#FA28FF'</span>,
|
||||
<span class="hljs-attr">generalizationLineWidth</span>: <span class="hljs-number">4</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置关联线的样式</h2>
|
||||
<blockquote>
|
||||
<p>关联线需要使用关联线插件</p>
|
||||
</blockquote>
|
||||
<p>关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">associativeLineColor</span>: <span class="hljs-string">'#FA28FF'</span>,
|
||||
<span class="hljs-attr">associativeLineWidth</span>: <span class="hljs-number">4</span>,
|
||||
<span class="hljs-attr">associativeLineActiveColor</span>: <span class="hljs-string">'#9F0500'</span>,
|
||||
<span class="hljs-attr">associativeLineActiveWidth</span>: <span class="hljs-number">6</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置节点边框风格</h2>
|
||||
<p>默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">nodeUseLineStyle</span>: <span class="hljs-literal">true</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置节点内边距</h2>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">30</span>,
|
||||
<span class="hljs-attr">paddingY</span>: <span class="hljs-number">20</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置节点内的图片最大的显示宽高</h2>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">imgMaxWidth</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">imgMaxHeight</span>: <span class="hljs-number">50</span>
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置节点内图标的显示大小</h2>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">iconSize</span>: <span class="hljs-number">30</span>,
|
||||
})
|
||||
</code></pre>
|
||||
<h2>设置节点外边距</h2>
|
||||
<p>设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-comment">// 二级节点样式</span>
|
||||
<span class="hljs-attr">second</span>: {
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">30</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">20</span>
|
||||
},
|
||||
<span class="hljs-comment">// 三级及以下节点样式</span>
|
||||
<span class="hljs-attr">node</span>: {
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">30</span>
|
||||
}
|
||||
})
|
||||
</code></pre>
|
||||
<h2>完整示例</h2>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNq1WAtvE0cQ/iurQ8hOsc92EofgJoiQEIpEWgRUEOUidL5b2xfOt+ZunThEkYCWR3iUVqUtLbRKaQpIraBqq0ISkvyZ+JF/0dm9p31OsKM2UuS7nZlvvp3dnZ25BWGkVBJny1jICEOWYmoliixMy6WjkqEVS8SkaAGZOBdDxJggZYNiNYasgqzrZO4szqFFlDNJEUUAIeJZTGiGOiGXbJEkWDCs43gRRuNFuSQJkoGQZOiYIjbGNIeRUdZ1yZCMRAJVN76uLj2obV2r/b1e/+Hzxt0b9Rur1TvfNX5+KRkKMSyKZIVqs/hjomILbH0+0anpHgel8WqzvvGq8dn92vevd549bSz96RrD/I7nR4lOTLCN9qDho2iBUXLIiCA/X8BFPEqMnJaPchlCWVm5nDchBCo3zaDIgZH+sbFkEuYt0UVwu9jseeun+tpWbflN9d3DJs+ninIe788zNwXPBUpLViaR0CtXDGveEollxRUjnsXajGbkRVnX5suGYokKKSZkC1CtRC+eHEwPjqSKRJwp4Xwk1op9FpewTAHcIHGTP4d1zhBLoxoxQEvBsBdMZP+ENc9pVxlRhcyCtKsAndYMfI7O612FSAcjb1mSySOjJ5IuJya6oKm0kEF9gaExGXaNacrzYJFKx1AqGUPOTyrNbJspV+/crj14ZlPe+eWL2vI7ewMrZdMjfMpQcQVYJ20R88LHT2sws2E0FQHlWRyJoYhFTVnLFyDCKKJqJlZoZNoLwZxGlcK+o8CNMs3Op6IhmocO9aCDqA+8IhRemtrzG43n19nZa7dGnOBJeV8U89jAJuzPqzLbRwzCW7bxkd7B8XF32cKKziL2t99N1Zt/Na4/ArLAuh3fEWtffOH0EEUDDrMQyV3Jtmi5TNtLR3ju8pCOjCfTkET20nXwBlpnvr2xVX/0srr2TWNz1d2U9pzLFk+O+5qyAYafWr5tBlGzjHc5w3ZuvnUTGDTe/Bg4xsz9GVlVIR9147xkm1yEw5p0QuIMTWZQL5ysPVnA2lefbNaXbteeXquuvGBb4fFmfWWt+mpj57fHLex4MmV5qht+WjE/IVecBUm7FO3RjzA702z4PTSBY235ts9u5UX1j2AK5OzgrWtyjo0TvD04rHzbdsEmZDOvGd24ZLtw7X597YUN7J48JrIwYKsZG8X+K3L84OL6o876soFFR8jA3y4BePXh3e31X7ff3gt7Ybu1vY/+tj76XB9N8fGKm2h45qw4wXNuUeNOHOsZpBKlXIQLUMxjekKH2Bj0+PwpNRpxLCFUVIZjZEZ6HCqqTOUAW0lgA5KQCfCXBIorFMYkoba8ak9YErypuLFhikpB01UTG6A85QMEsNp7aPESXL+AI1evORGHkZoZ84sjhOKTDr/tNo3QVPaaTguN6p1btUevt9+u7zx7HCJj67KzArpwK5dMjZganb+UikyHVJu5hvnyC3R39f9xAi03xXnY4FDn8RgKAwNKti8n4/jhVB+O9/cmU/Fsr9wXHxzoT6bUgb5cNj0oCeHZ7orLdrJJ9E9yOVZMMidTC5JQgYd4bzomCfPwlFyMOWOBoemWAHUf0eBrQBaE+Y93vKZyrc6CGLZm1wrbWZLQTZl+Ra8kKoXekYuXj1cmi+mZkzidGzs8dmHSHE1nxZKR380VS/jMXZutNseuKSZLJYO50BUX+H3lyAMJiEJi7PjABpfEfXTGXDPN0OhZQuySwOsgpiI6zvEK2OkhnFr0Q7s75Nm//uSr6pe/O0mf94Pba/e21/8J3kvEiELLouJLdk8IgFH2GuM3A6t+/YQO5ZXfN4qzsl5m16ur55XC8D+UsHth6ILhhWJoYGWK4Q2hIVWbRYoOx2RYEhwSY7hIJIGLHQVN9aXeNQAqQwmQBhVdJEqInpWZii2U6FC2TCkx0DFF15TLoOL3raAVbm+HEraBAwD4bQF42dMCYBdNHQF4ZaEPEegROoBobm8AJdxadYoS6EE8Nm1bl04BA02CBxhuLN6P1lp+A1i4Vu8o3IEy2g94c9HdMY5X8LYi8dW3a+TOwZxaM4wFpW2XWHbZ2Yrk1qgtMP4Jcp+GEoEDCq8WCznXOOZ8kJIEMWF/hXKqOBFbRVGx4Cbz0o0YOMtuuuAJlKfHg1wPmhEvf5kYPEIy4QKe+tj/gdYz70L5hnLWInqZ2obQtEMWzKCk80ZJyX8Ju7dTNqttk6WK67m93w9cz3bp66M6/ZQ74FEXnRTUIeOUy8Ah7b0DIKRPvgZCDO4otgLsu584YxEDPjNyeHZ5MQGrJVyHkgBfEe2bU0zAo2hCSa4VMVuseNYkcxY2AcS7CNt8WbRtw0vNrBxui8Liv2HIkPI=" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -227,7 +227,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.richTextToolbar {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
z-index: 2000;
|
||||
height: 55px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user