vue项目打包后卡死

2023-05-16

element使用el-tabs导致浏览器卡死

使用ElementUi开发后台本地是好的,打包后有一个页面打开就卡死浏览器,经排查发现在是由于引起的。

将vue、vue-template-compiler element-ui升级,发现问题还是存在。

"vue": "^2.6.10",
"element-ui": "^2.13.2",
"vue-template-compiler": "^2.6.10",

经过不断尝试推荐两种解决方案

解决方案1:修改的最外层元素的css样式,加上display和display-direction样式属性

<div class="t-search-content">
          <template>
            <el-tabs v-model="activeName" @tab-click="activehandleClick">
              <el-tab-pane label="订单信息" name="first">
                <viewOrder ref="view-order"></viewOrder>
              </el-tab-pane>
              <el-tab-pane label="运营信息" name="second">
                 <viewOperators ref="view-operators"></viewOperators>
              </el-tab-pane>
              <el-tab-pane label="门店信息" name="third">
                <viewShop ref="view-shop"></viewShop>
              </el-tab-pane>
              <el-tab-pane label="结算信息" name="fourth">结算信息</el-tab-pane>
            </el-tabs>
          </template>
<style scoped lang="scss">
.lt-search-content{
  width:100%;
  height:100%;
  /*加上display和display-direction样式属性就可以解决页面卡死问题*/
  display:flex;
  flex-direction:column;
}

解决方案2:使用el-row el-col元素来包裹el-tabs元素,也可以解决页面卡死问题

<tempalte>
  <div class="log-box">
  
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="activehandleClick">
              <el-tab-pane label="订单信息" name="first">
                <viewOrder ref="view-order"></viewOrder>
              </el-tab-pane>
              <el-tab-pane label="运营信息" name="second">
                 <viewOperators ref="view-operators"></viewOperators>
              </el-tab-pane>
              <el-tab-pane label="门店信息" name="third">
                <viewShop ref="view-shop"></viewShop>
              </el-tab-pane>
              <el-tab-pane label="结算信息" name="fourth">结算信息</el-tab-pane>
            </el-tabs>

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

vue项目打包后卡死 的相关文章

  • 解决vxe-table复选框翻页选中问题

    解决vxe table复选框翻页选中问题 根据vxe table官方文档 想要保留勾选中的数据 我们的代码中需要设置 row id 和 checkbox config中的 reserve 属性 vxe table官方文档 简单写下html部
  • vue3.0删除node_modules 无用的依赖

    安装插件 npm i depcheck 查看无用的插件 npx depcheck 对应删除 npm uninstall kd layout
  • vue+C#后台上传excel处理数据

    比较简洁的excel处理方法 希望对大家有所帮助 1 界面
  • Vue (三) 生命周期--钩子函数

    生命周期 Vue官网生命周期的描述 钩子函数 1 beforeCreate 创建Vue实例化之前所调用的函数 div h1 message h1 div
  • 生产环境的域名地址与后端给的接口地址不一样时的配置(vue)

    1 找到 config dev env js 文件 module exports merge prodEnv NODE ENV development API ROOT http com 本地开发时用的域名 2 找到 config prod
  • ip正则表达式

    var Sip rule value callback gt if 2 5 0 5 0 4 d 0 1 d 1 2 2 5 0 5 0 4 d 0 1 d 1 2 3 test value false callback new Error
  • vue父子组件通信方式哪几种

    第一种 props和 emit parent vue
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • Vue与TypeScript的完美结合

    前言 TypeScript 是 JS类型的超集 并支持了泛型 类型 命名空间 枚举等特性 弥补了 JS 在大型应用开发中的不足 在我们自己单独学习 TS时 时常感觉很多知识点还是比较好理解的 但要和框架结合的话 感觉就有点糟 因为我使用Vu
  • vue动态绑定video视频src问题解决

    做个项目 视频部分需要先后台上传 然后前端页面显示 然后就遇到了视频动态获取地址的问题 一开始想着很简单 使用v model双向绑定就行了 结果试了下并不行 后面开始度娘 尝试过很多人说的 refs解决 结果并不行 虽然浏览器中看地址确实绑
  • ant-design-vue 全局和局部引入组件

    1 全局引入 在main js里面引入 import Vue from vue import ant design vue dist antd css import Antd from ant design vue Vue use Antd
  • uni-app项目中使用scss语法

    最近正在学习uni app开发 我先把文档浅略翻了遍 发现组件和接口几乎都是按照微信小程序走 但是视图层上的语法又是按照vue的语法走的 所以开发过程一定要注意这点 然后我想在uni app项目中使用scss语法 但是具体怎么安装呢 历经曲
  • vue element select下拉框树形多选

    components 文件下新建 SelectTree文件 index vue SelectTree index vue
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开
  • 滚动条样式

    一 在div中的滚动条样式 div webkit scrollbar width 5px 滚动条宽度 div webkit scrollbar thumb border radius 10px 滚动条圆角 webkit box shadow
  • 【vue3】elementplus日期组件英文转中文

    vue3 elementplus日期组件英文转中文 1 在main js或者main ts中加入 即可解决 import ElementPlus from element plus import element plus dist inde
  • vue_table导出excel

    vue直接导出对应table const exportClick gt const wb XLSX utils table to book document querySelector newTables 关联dom节点 get binar
  • 拓展:vue 父组件调用子组件方法ref(且父组件可通过ref调用的方法传值给子组件)

    1 ref被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs对象上 一 ref被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs对象上 div class formBtn fl 111 div div
  • vue项目日期处理day.js

    dayjs安装 1 npm 安装 npm install dayjs save 2 项目使用 import dayjs from dayjs ES 2015 dayjs format 使用介绍 1 秒 获取或设置秒 接受0到59的数字 如果
  • vue中的防抖和节流

    在Vue中 防抖和节流是两种常用的优化技术 用于限制事件的触发频率 以提高页面性能 防抖 Debounce 是指在事件被触发后 等待一段时间后再执行回调函数 如果在这段等待时间内 事件又被触发 则重新计时 防抖通常用于限制重复触发频率较高的

随机推荐

  • Python 内部函数修改外部变量的值报错

    今天写题时遇到了这样一个问题 xff1a UnboundLocalError local variable 39 total 39 referenced before assignment 错误出现在我试图通过内部函数修改外部变量的值 xf
  • go get xxx: disabled by GOPRIVATE/GONOPROXY解决方案

    go拉包比如go get的时候出了这个错 xff0c 资料比较少 xff1a disabled by GOPRIVATE GONOPROXY 长话短说 xff0c 解决方案 xff1a 给你的GOPROXY加上direct xff0c 注意
  • Window10系统安装V-rep教程(有百度网盘文件包)

    Window10系统安装V rep教程 64 meng 看了很多教程 xff0c 都没有找到适合Windows10的V rep安装教程及安装包 xff0c 官网上又那么慢 xff08 最近更新了篇博客 xff0c 大家需要其他版本的请移步
  • Integer和int的区别

    Integer是int的包装类 int是基本数据类型 最主要的区别就是这句 一个是基本数据类型 一个是类 但其实其中隐含的细节很多 比如 Integer的默认初始值是null xff0c 而int的默认初试值是0 Integer变量必须先实
  • 如何配置Filebeat收集日志文件

    Filebeat7 6 日志输入 filebeat inputs type log paths var log log var path2 log 您可以添加额外的 配置设置 xff08 如fields xff0c include line
  • 在 Mac 上的“照片”中删除照片或恢复删除的照片

    从图库中删除照片和视频后 xff0c 它们会放在 最近删除 相簿中并保留所显示的天数 xff0c 然后才会永久删除 您可以在该时间段结束前恢复项目 如果打开了 iCloud 照片 xff0c 您可以在 30 天内从 iCloud 恢复照片和
  • php获取数组第一个和最后一个元素的key

    PHP 7 3 0之前的版本获取数组第一个和最后一个元素的key的几种方法 span class token variable a span span class token operator 61 span span class toke
  • PHP源码中EXPECTED和UNEXPECTED的作用

    经常能在源码中很多分支条件判断加了这两个宏 了解具体的作用 例如 xff1a span class token keyword if span span class token punctuation span span class tok
  • 使用PHP实现一个简单web服务器

    web服务器是基于http协议 xff0c 将对应的文件传输给客户端的服务器 web服务器是什么 web服务器是基于http协议 xff0c 将对应的文件传输给客户端的服务器 HTTP协议 http 协议的请求及响应方式设计 http请求信
  • 安装php多版本管理工具phpenv

    1 Install phpenv Install phpenv span class token function git span clone https github com madumlao phpenv git phpenv Ins
  • 导入阿里源maven库证书

    在在maven gt reimport 时出现如下的错误 Could not transfer artifact org springframework boot spring boot starter parent pom 1 3 8 R
  • 项目使用多个maven库的方法

    有时在项目中需要使用第三方提供的SKD xff0c 然而这些Jar包是没有在Maven中央仓库的 需要导入一个知识的Maven库 导入方法有以下两种 xff1a 第一种方法是在POM中指定要使用的Maven span class token
  • mysql8初始密码及root密码修改

    安装mysql8之后没有办法登录 xff0c 初始密码是多少 xff1f 初始密码在 etc mysql debian cnf 修改root帐号 ALTER USER span class token string 39 root 39 s
  • ros学习(一): ros的bag包读取错误问题及解决方法

    一 ERROR bag unindexed 2021 6 23 0103all bag Run rosbag reindex 1 问题 想要跑一个很久没有用的 bag文件 xff0c 运行命令 xff1a rosbag info xxx b
  • BaiduPCS-Go出现403 Forbidden错误解决方法

    今天使用BaiduPCS Go下载百度云资源时 xff0c 下载一个比较大的文件时下载到一半就出现了403 Forbidden错误 xff0c 之后就再也无法下载了 上网查了下 xff0c 发现很多人都说时账号被封 xff0c 但是我试了下
  • ubuntu创建桌面快捷方式

    有些软件是自己安装的 xff0c 并不有在启动器创建快捷方法 使用起来很不方便 xff0c 那么就需要自己来手动创建了 在 usr share applications 目录下创建与应用程序同名的 desktop文件 Typora desk
  • SSH配置公钥快速登录服务器

    使用多个git服务器每次都需要输入帐号密码 xff0c 这个是不能忍受的 可以使用ssh配置公钥快速登录 xff0c 不需要再输入密码了 xff0c 很快捷 生成 添加SSH公钥 ssh keygen t rsa C span class
  • Xdebug 2升级到3指南

    官方文档 xff1a https xdebug org docs upgrade guide 升级指南 xff0c 详细介绍了Xdebug 2和3之间的哪些更改 xff0c 以及如何重新配置 您的设置以执行类似的操作 新概念 xff03 与
  • git clone提示matching host key type found. Their offer: ssh-rsa

    win11系统在使用git clone时 xff0c 提示matching host key type found Their offer ssh rsa 在 ssh config增加 xff1a HostkeyAlgorithms 43
  • vue项目打包后卡死

    element使用el tabs导致浏览器卡死 使用ElementUi开发后台本地是好的 xff0c 打包后有一个页面打开就卡死浏览器 xff0c 经排查发现在是由于引起的 将vue vue template compiler elemen