程序员经验分享-hwhale

vue element-ui el-tooltip组件失效问题

2023-12-16

引用自:
https://blog.csdn.net/ygrhlh/article/details/121660806

vue element-ui el-tooltip组件失效问题

因为公司项目年代久远以及谷歌chrome 80 后的samesite问题，所以在开发阶段使用Firefox来查看效果

项目上到测试环境之后，我这边使用Firefox查看效果是没有问题的，tooltip组件正式显示

但是当测试使用Chrome的时候，tooltip组件没有显示，审查元素也发现没有相应的tooltip的html元素出现，正常来讲应该是要出现类似以下的html元素的

最后经过大量百度(bushi) 以及查阅github的issue之后得出：

当el-tooltip组件内直接放置文本或者单一元素的时候，在Chrome会有tooltip不出现的问题，在Firefox却不会

直接放置文本 
<!-- 单一元素 -->
<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
 	<textarea v-model="value" @change="updata"></textarea>
</el-tooltip>
1 2 3 4 5 6 7 8 9 10 11 尝试解决 但是如果你用一个盒子去包裹的话，它又可以了！！！

用一个p标签包裹文本 

<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
 	<div>
 		<textarea v-model="value" @change="updata"></textarea>
	</div>
</el-tooltip>
1 2 3 4 5 6 7 8 9 10 11 总结 在使用el-tooptip组件时应该始终用一个盒子去包裹住里面的元素

以上
如有错误，请不吝赐教
————————————————
版权声明：本文为CSDN博主「ygrhlh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ygrhlh/article/details/121660806

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

踩坑

vuejs

ui

前端

vue element-ui el-tooltip组件失效问题 的相关文章

  • 如何在localStorage中存储数组？

    我有一个数据属性 data return playWord baseWord result 并回应 baseWord Amazing 每次我在 api 中发送新请求时 基本词都会发生变化 我想将每个数据存储在本地存储中并将字符串值发送到 a

  • Vue.js 隐藏当前视口之外的项目

    我正在 Vue js 中制作一个电子商务类型的菜单 其中的项目是包含大量功能和图像的 div 当渲染大约 200 个这样的项目时 性能相当不错 但是当添加的数量超过这个数量时 网站的性能开始变得缓慢 如果 Vue 元素位于当前可滚动视图之外

  • Vue 3 - 如何将组件和混入与根组件一起包含？

    我尝试将语法从 Vue 2 转换为 Vue 3 但我不确定如何包含mixins and 成分 如果您在 Vue 2 中看到以下代码 import App from App vue const app new Vue mixins globa

  • Vue Test Utils 中的“存根子组件”是什么？

    Vue 测试工具 https vue test utils vuejs org有一个名为的 API 方法shallowMount https vue test utils vuejs org api shallowmount that 创建

  • 如何在 Nuxt.js 中设置 beforeResolve 导航防护

    有没有办法在 nuxt config js 中添加 beforeResolve 导航防护 我的 nuxt config js module exports router beforeResolve to from next if this

  • 预渲染 vue.js 2.0 组件（类似于 vue 1 中的 this.$compile）

    我正在努力使可重复使用的组件网格堆栈 https github com troolee gridstack js 我找不到一种简单的方法来做类似的事情this compile方法来自vue 1 我见过这个example http codep

  • Vue - 如何附加组件？

    我正在尝试创建一个按钮 一旦按下该按钮 就会向我的组件添加一个子组件 我的代码可以工作 只是 HTML 被解析为字符串 这是父组件

  • 如何在Nuxt Js中使用Google Map API？

    下面是我在 Nuxt Js 中获取 API 的代码 我已经编写了用于调用 API 的代码 但没有得到结果 我也没有得到任何与此相关的资源 async created const config headers Accept applicati

  • 挂载 vue 组件 - Vue 3

    我想在 Vue 3 中这样做 new ComponentName propsData title hello world mount 但我收到这个错误 VueComponents component name WEBPACK IMPORTE

  • 使用 v-bind Vue.js 的多个变量

    我试图在以下代码中传递多个变量 div div 但我收到以下错误 Vue warn 无法生成渲染函数 SyntaxError 意外的标记 在 我尝试更换 with a 但我得到 Vue warn 无法生成渲染函数 SyntaxError I

  • 根据条件添加 vue 指令

    是否可以根据条件设置指令 我有一个 粘性 指令来使元素粘在屏幕上 我有一个正在使用的社交分享组件

  • Cypress Vue 组件测试从已挂载发出的事件

    我有一个 vue2 组件 它在其安装的生命周期挂钩中发出一个事件 该事件被发出 并且可以由使用该组件的页面处理 但是 我还想测试该事件是否在我的组件测试中发出 该测试使用赛普拉斯组件测试运行程序 这是一个精简版本 组件 TheCompone

  • 如何使用 Vue 路由器从 Vuex 操作进行导航

    我正在使用 Vue 2 x 和 Vuex 2 x 创建一个 Web 应用程序 我正在通过 http 调用从远程位置获取一些信息 我希望如果该调用失败 我应该重定向到其他页面 GET PETS state gt return http get

  • 超出最大调用堆栈大小 - Vue.js

    我有一个计算方法 可以让我计算产品的总价和折扣值 并希望获得以下值 总计 折扣 cartTotal var total 0 var discount Math round 0 1 this cartTotal 100 100 this ca

  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看

  • Webpack 不包括 ProvidePlugins

    我正在开发一个小型试用 Web 应用程序 它使用 vue webpack 模板 https github com vuejs templates webpack https github com vuejs templates webpac

  • 组件内调用 Mixin 的方法（Vuejs）

    我无法从组件调用 mixin 方法 出现此错误this hello is not a function 我可以打电话hello 来自 Vue 实例 但我无法在组件内调用它 有什么事吗 div div

  • 使用 vee-validate 在 vue js 中进行验证有错误

    我想在 vuejs 中进行验证 因为我正在使用 vee validate 我的vue js版本是2 6 10 并安装 run npm install vee validate 我在 main ts 中声明 import VeeValidat

  • 如何在外部 .js 文件中分离 .vue 组件的方法？

    我的组件留下了许多行代码 因此我决定将这些方法放在一个名为functions js 的单独文件中 我无法调用这些方法 我试过这个 函数 js function sendList function getLists function dele

  • Vue 创建项目 - 找不到模块“vue-loader-v16/package.json”

    我通过命令全局安装了 vue clinpm install g vue cli我尝试通过命令创建新项目vue create examples vue 2一切都很好 直到我跑步npm run serve 这个命令给我一个错误找不到模块 vue

随机推荐

热门标签