惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
Stack Overflow Blog
Stack Overflow Blog
B
Blog RSS Feed
C
Check Point Blog
D
Docker
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
Google DeepMind News
Google DeepMind News
MongoDB | Blog
MongoDB | Blog
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
量子位
有赞技术团队
有赞技术团队
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
M
MIT News - Artificial intelligence
B
Blog
阮一峰的网络日志
阮一峰的网络日志
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
腾讯CDC
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
月光博客
月光博客

博客园 - Shapley

项目心得 进程间通讯方式 C#使用MCP协议调用大模型示例 SQL Server LEAD函数实践 sql server行专列一例 数据库字段排序方法两则 Sql Server生成ULID例子 审批流进化记 winform+Task+async 献丑贴:Task.Run中foreach优化 Sql Server Begin TRY sample No service for type 'Microsoft.AspNetCore.Mvc.ViewFeatures.Filters.ValidateAntiforgeryTokenAuthorizationFilter' has been registered. Element-plus的el-date-picker控件动态切换中英文方案 Chrome浏览器无法查看页面跳转前的请求日志及解决办法 element-plus上传视频并生成缩略图(封面)方案 JWT自动刷新草案 Ajax方法POST的两种提交方式 H5项目在微信浏览器运行实录 Sql Server变量声明及使用技巧 修改Dify的Nginx对外访问端口 Task with Console(with SemaphoreSlim) Task实战 asp.net core 9.0发布centos7.9 Barrier CountdownEvent
某低代码平台自定义控件技术点
Shapley · 2025-08-19 · via 博客园 - Shapley

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();
},

完美解决所有问题!~