AntDesign tooltip组件异步显示错位问题

tooltip是前端交互常用的一个组件，很多时候可能tooltip中显示的content并非是常量，而是需要我们通过接口请求获取content，但是在AntDesign中，tooltip的content如果是异步赋值的话，经常会出现位置错乱的问题，要解决这个问题，首先要对其出现的场景以及原因做出分析
场景
AntDesign中的tooltip显示或隐藏有两种控制方法，一种是自动触发，即根据属性trigger的配置（hover/focus/click/contextmenu）以及默认visible触发；另一种是手动控制组件的visible属性，直接控制其显隐

出现的原因分析
以自动触发为例，我们在其渲染之前打断点，就可以看到，若为异步请求，从触发visibleChange，到tooltip渲染在页面上，其大小和位置进行了多次计算，第一次的计算结果是正确的，后面的多次计算可能会引起位置偏差；而如果是本地的变量直接渲染，那么则直接渲染出来的位置就是正确的，由此现象我们可以推导出两种解决方法

率先把tooltip渲染到页面上，然后再去请求数据赋值
异步请求会引起tooltip对位置的多次计算，那么如果我们把空字符串或提示性语句作为常量先渲染出来，常量渲染的位置是不会出错的，且渲染完成后位置将固定，然后再去进行异步请求再赋值，这样就能解决该问题，具体可如下
用v-model绑定visible，这样就是自动触发，此时我们监听visible

watch: {visible: {immediate: true,handler: function (val) {setTimeout(() => {Promise.then((res) => {// 赋值})}， 80)}}
}

这个方法有个缺陷setTimeout的时间间隔其实是一个预估值，即渲染到页面的大概时间，有可能会出现误差（一般不会）

手动控制visible，当请求和赋值完成后，再设置为true，让其渲染
用属性visible监听显示隐藏（:visible=“visible”）,通过visibleChange事件在事件中改变visible值，这样，当事件中请求和赋值完成后，再把visible设置为true，此时就相当于常量渲染，位置就不会出错

<a-tooltip:visible="visible"trigger="hover"@visibleChange="handleChange"
></a-tooltip>

handleChange(val) {if (val && otherConditions) {Primise.then((res) => {// 赋值contentthis.visible = true})} else {this.visible = val}
}

这个方法也有缺点就是如果接口太慢，就要较长才能渲染出来，切没有提示

由于没有看源码，对于原因的分析，也只是自己调试出来的结果，或者说是现象更贴切，如果哪位大佬知道原因，感谢留言，互相学习

AntDesign tooltip组件异步显示错位问题相关推荐

解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
django+echarts+ajax异步+显示优化--基本例子
django+echarts+ajax异步+显示优化--基本例子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
蚂蚁金服 Ant-design 常用组件和属性整理
蚂蚁金服 Ant-design 常用组件和属性整理本文摘录自:AntDesign官网 1. 通用组件 1.1 Buttondisabled - booleanghost - booleanhref ...
JAVAFX 鼠标悬浮提示 Tooltip组件
Tooltip组件说明 Tooltip控件,它可以设置给任何UI控件,当鼠标移动到该控件上时Tooltip就会显示. Tooltip类表示一个常见的UI组件,它常用于为其他UI控件显示附加的信息.通过 ...
Vue动态组件异步组件 keep-alive
动态组件指的是动态切换组件的显示与隐藏每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理 &l ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
webpack 打包vue,组件不显示
2019独角兽企业重金招聘Python工程师标准>>> const path = require('path'); const ExtractTextPlugin = require ...
.ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).ready(function () { $(" ...

AntDesign tooltip组件异步显示错位问题

AntDesign tooltip组件异步显示错位问题相关推荐

最新文章

热门文章