首页 > 其他分享 >Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following

Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following

时间:2023-04-17 15:06:56浏览次数:38  
标签:选项 computeStyles 禁用 least Element Detected popper Popper adaptive

Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following_解决方案

这个错误的解决方案如下:

1. 禁用 "computeStyles" 修饰符的 adaptive 选项:这将允许平滑过渡,但可能会降低性能。

禁用 "computeStyles" 修饰符的 adaptive 选项,可以在创建 Popper 实例时指定 modifiers 参数,并将 computeStylesadaptive 属性设置为 false。示例如下:

import { createPopper } from '@popperjs/core';

const popper = document.querySelector('.popper');
const reference = document.querySelector('.reference');

createPopper(reference, popper, {
  modifiers: [{
    name: 'computeStyles',
    options: {
      adaptive: false,
    },
  }],
});

在上面的代码中,我们创建了一个 Popper 实例,并将 computeStyles 修饰符的 adaptive 设置为 false。这样就可以禁用 adaptive 选项并允许平滑过渡。

Element Plus 的 ElDropdown 组件是基于 Popper.js 构建的,所以可以使用相同的方式来禁用 adaptive 选项。

ElDropdown 组件中,你可以使用 popper-options 属性来指定 Popper 实例的选项。因此,要禁用 adaptive 选项,你可以将 popper-options 属性设置为一个对象,并在其中指定 modifiers 选项。示例如下:

<el-dropdown trigger="click" popper-class="my-dropdown" :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
  <!-- Dropdown content -->
</el-dropdown>

在上面的代码中,我们通过 popper-options 将 Popper 实例的选项传递给了 ElDropdown 组件。在该选项中,我们指定了一个名为 computeStyles 的修饰符,并将其选项中的 adaptive 设置为 false,以禁用自适应选项并允许平滑过渡。

注意,在这个例子中,我们还指定了 popper-class 属性来设置弹出框的类名为 my-dropdown。这是可选的,可以根据需要进行调整。

2. 删除这些属性的过渡声明:如果可能的话,从这些属性中删除任何过渡,以便它们不会干扰 popper 的定位。

3. 使用包装元素:而不是直接在 popper 元素上应用过渡,将您想要动画化的内容包裹在一个单独的内部元素中,并将过渡应用于该元素。这允许平滑的动画,而不会干扰 popper 的定位。

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



标签:选项,computeStyles,禁用,least,Element,Detected,popper,Popper,adaptive
From: https://blog.51cto.com/echohye/6195171

相关文章

  • 【vue3-element-admin】Husky + Lint-staged + Commitlint + Commitizen + cz-git 配
    前言本文介绍vue3-element-admin如何通过Husky+Lint-staged+Commitlint+Commitizen+cz-git来配置Git提交代码规范。核心内容是配置Husky的pre-commit和commit-msg两个钩子:pre-commit:Husky+Lint-staged整合实现Git提交前代码规范检测/格式化(前提......
  • elementui表单循环添加校验
    1<el-form2:model="dynamicValidateForm"3ref="dynamicValidateForm"4:inline="true"5>6<templatev-for="(item,index)indynamicValidateForm.domains">......
  • React onBlur回调中使用document.activeElement返回body解决方案
    最开始想实现一个功能,点击img图标后给出购物下拉框CartDropdown,当img及CartDropdown失去焦点时隐藏CartDropdown。最开始的核心代码如下:exportdefaultfunctionCart(){ const[isCartOpen,setIsCartOpen]=useState(false) functionclickHandler(){ setIsCartOpen(......
  • 6. Element Plus前端组件库
    ElementPlus前端组件库大纲ElementPlus基本使用容器布局导航栏字体图标栅格布局卡片表单数据表格反馈提示ElementPlus基本使用Element-UI是基于Vue开发的一套UI组件库,提供丰富网页开发的组件,可快速开发网站,降低前端开发成本。目前ElementUI有两个版本:Eleme......
  • vue-element-admin 动态菜单改造
    vue-element-admin动态菜单改造vue-element-admin是一款优秀后台前端解决方案,它基于vue和element-ui实现。开源后台管理系统解决方案项目Boot-admin的前端模块就是基于vue-element-admin开发而来。作为一款纯前端的后台界面解决方案,vue-element-admin是通过遍历路由进行渲......
  • element的Popover 弹出框组件关闭
    封装了个message底部消息提示框。采用了Popover组件制作。点击页面某些地方没办法关闭此弹出框。所以写了个右上角的关闭图标,调用组件内部事件:doClose()关闭;doShow()显示     ......
  • element 设置选择日期范围短
    只能选择今年和去年     <el-date-picker      style="width:100%;"      v-model="sgcxForm.year"      size="small"      type="year"      value-format="yyyy"      :......
  • org.xml.sax.SAXParseException: Document root element "struts-config", must match
    org.xml.sax.SAXParseException:Documentrootelement"struts-config",mustmatchDOCTYPEroot"structs-config". 头文件换一下spring1.X使用DOCTYPE,而2.X版本使用schema。我们使用低版本的spring就要配置文件使用dtd解析方式,使用高版本的就要使用xsl解析方式。<!DOCTYPEs......
  • Vue.js element-ui
    基本使用视频按需引入视频7.1移动端常用UI组件库Vanthttps://youzan.github.io/vantCubeUIhttps://didi.github.io/cube-uiMintUIhttp://mint-ui.github.io7.2PC端常用UI组件库.ElementUIhttps://element.eleme.cnIViewUIhttps://www.iviewui.comsrcApp.vue......
  • 【element-ui】解决textarea show-word-limit挡住文字问题
    问题:“67/500”默认背景为白色已超出文本输入框,遮住部分上border,当文字到达右侧时会遮住部分文字,且无法点击该部分解决方案:背景透明色,文字放到右下角 html:<el-inputtype="textarea"autosize maxlength="500"show-word-limit v-model="form.keyIndustry"placeh......