vue + iview 使用原生拖拽事件无效问题解决办法

vue中使用拖拽事件,可以直接绑定使用,例如:

.....
<div
	draggable="true"
	@drag='drags($event, "42225")' 
	@dragstart='dragstart($event)'
	>
	拖拽
</div>
.....

但在使用 iview 的组件的时候这么写是没有效果的, 例如:

<Row>
	<Col span='24'>
		<Button
		draggable="true"
		@drag='drags($event, "45")'    //  无效写法
		@:dragstart='dragstart($event)'  //  无效写法
		@dragleave='dragleave($event)'  //  无效写法
		@dragend='dragend($event)' //  无效写法
		type="primary">Primary</Button>
		
	</Col>
</Row>

其原因就是因为 Button是个组件,对其绑定拖拽事件需要使用 .native 修饰,并且需要使用 v-on 来绑定
如下:

<Row>
	<Col span='24'>
		<Button
		draggable="true"
		v-on:drag.native='drags($event, "45")' 
		v-on:dragstart.native='dragstart($event)'  // 正确使用
		v-on:dragleave.native='dragleave($event)' 
		v-on:dragend.native='dragend($event)' 
		type="primary">Primary</Button>
		
	</Col>
</Row>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值