组件A底部栏(position: fixed )事件使用$emit更新内容失败bug解决
今天遇到一个很离奇的bug，记录一下
问题：在组件内底部栏使用$emit触发按钮事件但打印出来的值是初始化的值，更新的值被重置导致更新失败
原因：组件内底部使用了 position: fixed; 固定， 导致组件内插槽 this 与 保存按钮的this 不一致
解决： 取消position: fixed; 改用 position: absolute;
组件 editDetail
<div class="container">
<div >
...
<div class="footer">
<el-button class="btn" size="mini" @click="submit">保存</el-button>
</div>
</div>
</div>
// 保存
submit() {
this.$emit('submit')
},
.footer{
// position: fixed;
position: absolute;
bottom: 0;
min-height: 55px;
background: #FFFFFF;
z-index: 999;
...
}
页面 edit.vue
<editDetail @submit="handleSubmit">
<template slot="scope">
<el-form ref="form" :model="form" :rules="rules" :label-width="80px">
<el-form-item label="xxx" prop="xxx">
...
</el-form-item>
...
</el-form>
</template>
</editDetail>
handleSubmit() {
console.log('form', this.form)
}