当采用el-checkbox,内层嵌套el-image,两个组件同时具备点击,而且是组件自带的点击
<el-checkbox-group v-model="auditSetting.hi_photo">
<el-checkbox v-for="item in settingInfo.hi_photo" :key="item.id" :label="item.id">
<div v-redDot="item.state === 3">
<div @click.stop.prevent="() => {}">
<image-btn
style-text="width: 50px; height: 50px"
:url="item.url"
:preview-src-list="hiPhoto(settingInfo.hi_photo)"
/>
</div>
<br>
{{ item.id }}
</div>
</el-checkbox>
</el-checkbox-group>
如上图代码,image-btn是进行二次封装的el-image,在这个组件外层再加一个div,并带上点击阻止冒泡
<template>
<div v-if="isShow" class="image-btn">
<el-image
:src="url"
:style="styleText"
:preview-src-list="previewSrcList"
:fit="fitText"
@click.stop.prevent="imgClick($event)"
/>
</div>
</template>
<script>
export default {
name: 'ImageBtn',
即 @click.stop.prevent="() => {}"