记录一个小note:

@click.stop.native="()=>{}"

<el-checkbox-group v-model="checkList">
   <div class="li" :class="item.checked ? 'active' : ''" v-for="(item,index) in scrollList" :key="item.title" @click="changeCheckbox(item,index)">
     <span class="name">
        <span class="text">{{item.title}}</span>
        <el-checkbox :label="index" @click.stop.native="()=>{}" @change="changeCheckbox(item,index)"></el-checkbox>
     </span>
     <span class="num">{{item.num}}</span>
     <span class="old">
         <span>较前一日</span>
         <span>{{item.yesterday}}</span>
     </span>
     <span class="old">
         <span>较上周同期</span>
         <span>{{item.lastWeek}}</span>
     </span>
   </div>
</el-checkbox-group>
  • stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡
  • prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播)
  • capture:与事件冒泡的方向相反,事件捕获由外到内
  • self:只会触发自己范围内的事件,不包含子元素
  • once:只会触发一次
  • native: 可以理解为把一个vue组件转化为一个普通的HTML标签,在vue组件上绑定事件时使用

 

 

Logo

前往低代码交流专区

更多推荐