ant-design-vue 点击a-popconfirm组件时避免外层元素的点击事件

场景如图，点击图片时会有一个视口跳转事件，左下角有两个图标，是在a-popconfirm组件里的，点击图标时总是会触发图片的点击事件（代码中的toView()方法）。

原始代码如下：

              <div v-for="(item, index) in data" :key="index" class="imgHolder">
                <div class="viewImgHolder">
                  <img :src="item.pic" class="viewImg" />
                  <div class="imgMask" @click.stop="toView(item)">
                    <p :title="item.name">{{ item.name }}</p>
                    <a-icon
                      class="imgIconEdit iconHover"
                      title="设置"
                      type="setting"
                      @click="editView(item)"
                    ></a-icon>
                    <a-popconfirm
                      title="确定要删除吗?"
                      @confirm="deleteView(item)"
                      okText="确定"
                      cancelText="取消"
                    >
                      <a-icon class="imgIconDet iconHover" title="删除" type="delete"></a-icon>
                    </a-popconfirm>
                  </div>
                </div>
              </div>

解决办法为修改元素的层级关系，避免子元素冒泡到父元素，讲父级的div和图标元素放到同一层级。修改之后的代码如下：

              <div v-for="(item, index) in data" :key="index" class="imgHolder">
                <div class="viewImgHolder">
                  <img :src="item.pic" class="viewImg" />
                  <div class="imgMask" @click="toView(item)">
                    <p :title="item.name">{{ item.name }}</p>
                  </div>
                  <a-icon
                    class="imgIconEdit iconHover"
                    title="设置"
                    type="setting"
                    @click.stop="editView(item)"
                  ></a-icon>
                  <a-popconfirm
                    title="确定要删除吗?"
                    @confirm="deleteView(item)"
                    okText="确定"
                    cancelText="取消"
                  >
                    <a-icon class="imgIconDet iconHover" title="删除" type="delete"></a-icon>
                  </a-popconfirm>
                </div>
              </div>

如果除了图标没有其它元素，可以在图片点击事件上添加.self修饰符，这样可以避免别的元素影响。