阻止element元件中的<el-input/>的貼上功能
阿新 • • 發佈:2018-12-03
需求: 阻止element元件中的<el-input/>的貼上功能
實現思路: <el-input/>元件是由外層<div>和內層的<input>組成的, 根據瀏覽器的事件傳遞機制(先捕獲,後冒泡): 貼上的時候會先執行繫結在外層div上的paste事件捕獲方法, 然後再到內層的input, 因此可以在元件上捕獲監聽paste事件, 並阻止向下傳播即可
程式碼實現:
<template>
<section class="p-10">
<div class ="app">
<el-input v-model="val" placeholder="請輸入內容" @paste.native.capture.prevent="handlePaste"/>
</div>
</section>
</template>
<script>
export default {
data() {
return {
val: ''
};
}
};
</script>
事件修飾符說明:
- native: 表明這個是dom的原生事件,如果不加native, vue會認為paste是一個自定義事件,必須要在元件內手動觸發, 那麼在貼上的時候自然就不會觸發了
- capture: 表明這個方法在捕獲階段執行,預設為冒泡執行,參考addEventListener方法中的useCapture引數
- prevent: 相當於event.preventDefault阻止預設行為, 同時也會阻止事件的向下傳遞和向上冒泡
連結:https://www.jianshu.com/p/4d9d83fed298