本节将介绍如何更新当前激活节点的样式。
样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是setStyle方法，通过第三个参数进行指定：
// 设置常态样式
node.setStyle('样式属性', '样式值')
// 设置激活样式
node.setStyle('样式属性', '样式值', true)
文字样式目前支持：字体、字号、行高、颜色、加粗、斜体、划线。
这些样式选择的UI界面都需要你自行开发，然后调用节点的setStyle方法更新。
同样首先需要监听节点的激活事件来换取当前激活的节点：
const activeNodes = shallowRef([])
mindMap.on('node_active', (node, activeNodeList) => {
activeNodes.value = activeNodeList
})
// 设置字体
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。
// 设置边框颜色
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)
})
背景样式也就是背景颜色。
activeNodes.value.forEach(node => {
node.setStyle('fillColor', '#fff')
})
目前支持以下形状：
[
{
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。
activeNodes.value.forEach(node => {
node.setStyle('shape', 'circle')
})
节点线条支持设置：颜色、虚线、线宽。
// 设置线条颜色
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)
})
节点内边距支持设置水平和垂直方向的内边距。
activeNodes.value.forEach(node => {
node.setStyle('paddingX', 50)
node.setStyle('paddingY', 50)
})
激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：
import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
const checkIsSupportActive = (prop) => {
return supportActiveStyle.includes(prop)
}
其他和数值常态样式是一样的，只需要给setStyle方法传入第三个参数：
// 设置边框颜色
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)
})