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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章