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.
64 lines
1.6 KiB
64 lines
1.6 KiB
2 years ago
|
# 如何快速的封装自定义combo
|
||
|
|
|
||
|
|
FineUI中提供了很多下拉框组件,但总有时候不满足使用场景,需要自己封装
|
||
|
|
|
||
|
|
那么如何快速封装一个combo组件呢?总结多年的经验,分如下几个步骤
|
||
|
|
|
||
|
|
## 1.确定好el和popup
|
||
|
|
|
||
|
|
想好触发器和展开面板显示的内容.举个常见的例子,一个水平布局,包含一个文字和一个图标组成了el,一个button组成了面板
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const combo = {
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.horizontal_fill",
|
||
|
|
columnSize: ['fill', 24],
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.label",
|
||
|
|
text: "我是el"
|
||
|
|
}, {
|
||
|
|
type: "bi.icon_label",
|
||
|
|
text: "我是el上的图标"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "请点击"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
## 2.确定好触发方式
|
||
|
|
|
||
|
|
根据交互需要,确定好需要点击触发,还是鼠标悬浮触发,选择一个合适的`trigger`属性
|
||
|
|
|
||
|
|
## 3.确定好收起面板的控制逻辑
|
||
|
|
|
||
|
|
多数时候,我们需要在弹出面板进行操作之后收起面板,这时候需要手动监听事件调用`hideView`方法
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
let comboRef;
|
||
|
|
const combo = {
|
||
|
|
type: "bi.combo",
|
||
|
|
ref: ref => comboRef = ref,
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "请点击",
|
||
|
|
handler: () => {
|
||
|
|
comboRef.hideView()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
## 4.完善好设置值和获取值逻辑
|
||
|
|
|
||
|
|
在[combo特性详解中](./80.combo的一些特性详解.md)阐述了combo的特性,可以参考
|