vue项目打包后卡死

最新推荐文章于 2024-08-11 20:47:50 发布

_xiaoxiong

最新推荐文章于 2024-08-11 20:47:50 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： vue页面卡死

本文链接：https://blog.csdn.net/xiaoxiong_web/article/details/121529146

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了在使用Element UI开发过程中遇到的el-tabs导致浏览器卡死问题，通过修改CSS样式和使用el-row-el-col结构，提供了两种有效解决方法。升级依赖未解决问题，重点在于解决实践中的前端显示问题。

摘要由CSDN通过智能技术生成

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>