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

推荐订阅源

Google DeepMind News
Google DeepMind News
爱范儿
爱范儿
J
Java Code Geeks
L
LangChain Blog
V
V2EX
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
博客园 - Franky
Microsoft Azure Blog
Microsoft Azure Blog
Jina AI
Jina AI
Blog — PlanetScale
Blog — PlanetScale
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
The Cloudflare Blog
博客园 - 司徒正美
B
Blog
G
Google Developers Blog
Stack Overflow Blog
Stack Overflow Blog
罗磊的独立博客
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Apple Machine Learning Research
Apple Machine Learning Research
Engineering at Meta
Engineering at Meta
MyScale Blog
MyScale Blog
有赞技术团队
有赞技术团队
Hugging Face - Blog
Hugging Face - Blog

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

完美解决所有问题!~