在做项目中发现,使用ant-design-vue组件库时,有用到grid组件
<van-grid class="bottomGrid" :column-num="4">
<van-grid-item>
<span class="contextVal">
{{clueItem.name}}
</span>
<span class="contextDesc">
学员姓名
</span>
</van-grid-item>
<van-grid-item @dblclick.native="goToDetail(clueItem)">
<span class="contextVal">{{clueItem.phone}}</span>
<span class="contextDesc">
报名电话
</span>
</van-grid-item>
<van-grid-item>
<span class="contextVal">
{{clueItem.courses || '-'}}
</span>
<span class="contextDesc">
报名课程
</span>
</van-grid-item>
<van-grid-item>
<span class="contextVal centerTime">
{{(clueItem.createTime) | filterTime}}
</span>
<span class="contextDesc">
报名时间
</span>
</van-grid-item>
</van-grid>
宫格一共四个,想要在红圈双击的时候实现某个功能,代码如下:
<van-grid-item @dblclick.native="goToDetail(clueItem)">
<span class="contextVal">{{clueItem.phone}}</span>
<span class="contextDesc">
报名电话
</span>
</van-grid-item>
宫格本身只支持单击click事件,如果想要增加双击事件,需要在事件后增加.native修饰符
官网解释.native:
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
我的理解:
如果你想在某个组件的根元素上面绑定事件,除了他暴露的事件,你自己是绑定不上的,用.native修饰符注册元素的原生事件,就可以在组件上进行使用。
如果有表达不当,请指出,相互学习~