vue项目打包后卡死

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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！