某低代码平台自定义控件技术点

1.由于为止原因，font-size为0，导致页面内容无法显示，设置字体大小后解决。

2.发送数据后，如何刷新：

首先在【发送】按钮点击事件中进行发送处理，发送成功后，调用【接口刷新】按钮即可。错误的方式有：1.调用组件的刷新函数。2.调用【接口调用】->【组件刷新、组件赋值】。

3.如何在数据发送成功和控件加载数据后首先将滚动条滚动到最底部，方法有很多种。

方法一：在事件的【接口调用】后，添加JS代码节点进行处理，但这样有个缺点：没有和组件封装在一起，显得非常零散，不优雅。

方法二：直接把自定义控件的id设置，然后直接上原始代码进行滚动条设置：

const objms=document.getElementById("mymessages");
const m = objms.scrollHeight;
objms.scrollTop = m;

但这样做容易在html中和其他相同id的控件相冲突，也不是最佳实践。

方法三：直接用vue的ref.首先在控件中定义ref：

<div ref="messageContainer" ...

然后在刷新方法中使用：

refresh() {
     this.scrollToBottom();
},
setValue(newVal) {
     this.messages = newVal;
 },
getValue() {
　　 return this.messages
},
scrollToBottom() {
    this.$nextTick(() => {
        const container = this.$refs.messageContainer;
        container.scrollTop = container.scrollHeight;
    });
}

但这样反复测试了几次，发现不起作用，然后通过中控台打印发现，在调用refresh方法时，新数据还未刷新过来，造成先设置滚动条，再刷新数据，显然不够理想，于是在【发送】时候后添加【延时节点】，之后再调用【组件刷新】节点即可。

另外，在init事件中进行中控打印发现此事件加载时，控件已经加载完成数据，因此在init方法中直接调用this.scrollToBottom();方法，即实现控件展示即可滚动到最后。

init() {
       this.scrollToBottom();
},

完美解决所有问题！~