forked from fanruan/fineui-custom-tutorials
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.8 KiB
54 lines
1.8 KiB
4 years ago
|
# 父节可选中的树
|
||
|
|
|
||
|
|
# props结构
|
||
|
|
```javascript
|
||
|
|
type: "bi.custom_tree",
|
||
|
|
expander: {
|
||
|
|
type: "bi.select_tree_expander",
|
||
|
|
isDefaultInit: false,
|
||
|
|
el: {},
|
||
|
|
popup: {
|
||
|
|
type: "bi.custom_tree",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
el: {
|
||
|
|
type: "bi.button_tree",
|
||
|
|
chooseType: 0,
|
||
|
|
layouts: [
|
||
|
|
{
|
||
|
|
type: "bi.vertical",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
items: []
|
||
|
|
```
|
||
|
|
bi.expander的el触发的事件不会向上传递,因此要采用bi.select_tree_expander
|
||
|
|
bi.select_tree_expander的trigger设置的是"",目的是防止默认的"click"在节点被点击的时候触发展开.
|
||
|
|
|
||
|
|
# node实现
|
||
|
|
父节点可选中,只有点击展开收起按钮才可以触发展开收起.
|
||
|
|
我们需要override掉`doClick`方法,因为`NodeButton`中默认的`doClick`会调用`setOpened`方法.
|
||
|
|
|
||
|
|
之后需要主动监听展开收起按钮的点击事件,依据当前节点的`isOpen()`来调用`triggerCollapse`或`triggerExpand`方法
|
||
|
|
注意展开收起按钮要阻止冒泡,不然点击的时候会触发整个节点的选中
|
||
|
|
```javascript
|
||
|
|
setOpened: function (b) {
|
||
|
|
Node.superclass.setOpened.apply(this, arguments);
|
||
|
|
// 额外的自定义处理,如加号变成减号,三角箭头由→改为↓
|
||
|
|
},
|
||
|
|
|
||
|
|
handleButtonClick: function () {
|
||
|
|
this.isOpened() ? this.triggerCollapse() : this.triggerExpand();
|
||
|
|
},
|
||
|
|
|
||
|
|
doClick: function () {
|
||
|
|
// 很重要
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
# item实现
|
||
|
|
子节只涉及选中业务,不涉及展开收起业务,所以直接继承BasicButton即可,无需override任何方法
|
||
|
|
|
||
|
|
# 其他公共实现
|
||
|
|
1. 可以手动实现getValue方法,或者在构建items生成value属性
|
||
|
|
2. 选中样式可以采用`bi-list-item`、`bi-list-item-active`、`bi-list-item-active2`、`bi-list-item-none`等样式
|