阻止element組件中的的粘貼功能（轉）

需求: 阻止element組件中的<el-input/>的粘貼功能

實現思路: <el-input/>組件是由外層<div>和內層的<input>組成的, 根據瀏覽器的事件傳遞機制(先捕獲,後冒泡): 粘貼的時候會先執行綁定在外層div上的paste事件捕獲方法, 而後再到內層的input, 所以能夠在組件上捕獲監聽paste事件, 並阻止向下傳播便可

代碼實現:

<!-- handlePaste方法能夠隨意寫 -->
<el-input v-model="input" 
  placeholder="請輸入內容" 
  @paste.native.capture.prevent="handlePaste">
</el-input>

 

事件修飾符說明:

• native: 代表這個是dom的原生事件,若是不加native, vue會認爲paste是一個自定義事件,必需要在組件內手動觸發, 那麼在粘貼的時候天然就不會觸發了
• capture: 代表這個方法在捕獲階段執行,默認爲冒泡執行,參考addEventListener方法中的useCapture參數
• prevent: 至關於event.preventDefault阻止默認行爲, 同時也會阻止事件的向下傳遞和向上冒泡

轉載於：https://www.jianshu.com/p/4d9d83fed298；

https://www.jianshu.com/p/4d9d83fed298