elementUI + VUE el-input[type=number] 禁止滚动事件 隐藏上下箭头

it2024-03-14  77

1.隐藏上下箭头CSS样式

1

2

3

4

5

6

7

8

<style>

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

        -webkit-appearance:textfield;

    }    

    input[type="number"]{

        -moz-appearance:textfield;

    }

</style>

 2.解决谷歌火狐input[type=number]滚动事件

1

<el-input type="number" v-model="inputNumber" @wheel.native.prevent="stopScrollFun($event)"></el-input>

3.js

1

2

3

4

5

6

7

8

9

10

11

12

13

  stopScrollFun(evt) {

    evt = evt || window.event;

    if(evt.preventDefault) {

        // Firefox

        evt.preventDefault();

        evt.stopPropagation();

    } else {

        // IE

        evt.cancelBubble=true;

        evt.returnValue = false;

    }

    return false;

},

  ************@mousewheel.native.prevent 只在谷歌有效果,火狐没反应*******************

最新回复(0)