526互联

bug：点击按钮

发布时间 2023-11-30 15:05:36作者: shayloyuki

问题场景

  1. 点击按钮，父盒子会出现阴影。
    image
  2. 点击父盒子，页面有点击效果。但实际上父盒子没有绑定点击事件。
    image
模板代码 
      <div class="btn" v-if="showActions">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button type="primary" size="small" @click="formSave()"
              >保存</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button size="small" @click="formCancel()">取消</el-button>
          </el-col>
          <el-col :span="1.5" v-show="showCheckbox">
            <el-button
              type="primary"
              size="small"
              plain
              icon="el-icon-arrow-up"
              @click="lastItem"
              :disabled="!rowIndex"
              >上一条</el-button
            >
          </el-col>
          <el-col :span="1.5" v-show="showCheckbox">
            <el-button
              type="primary"
              size="small"
              plain
              icon="el-icon-arrow-down"
              @click="nextItem"
              :disabled="rowIndex === dataTotal - 1 || !dataTotal"
              >下一条</el-button
            >
          </el-col>
        </el-row>
      </div>
scss scoped 样式代码 
  // 调整底部按钮
  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0;
  }

解决

方案一：修改父盒子类名。

把 btn 改为 btn-action 后，没有上述两个问题了。

因此，怀疑是类名 btn 样式污染，但 scoped 中为何会出现样式污染，目前原因不明；

方案二：去掉 flex 样式。

也没有上述问题了。原因不明。

  // 调整底部按钮
  .btn {
    // display: flex;
    // justify-content: center;
    margin: 10px 0;
  }

尝试

试过给 click 加 .stop, .native.stop 修饰符，但都无效。
记录一下 bug，后续研究下。有知道的小伙伴，评论区告诉我一下