element-ui里的el-input type=number 隐藏上下箭头、禁用滚轮

原文地址:https://www.cnblogs.com/dyy-dida/p/11496588.html
1.隐藏上下箭头CSS样式

<style>
    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }    
    input[type="number"]{
        -moz-appearance:textfield;
    }
如果以上代码不起作用就用 
  input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance: textfield;
}
</style>

2、禁用滚轮

<el-input type="number" v-model="inputNumber" @wheel.native.prevent="stopScrollFun($event)"></el-input>
//方法
stopScrollFun(evt) {
    evt = evt || window.event;
    if(evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
    } else {
        // IE
        evt.cancelBubble=true;
        evt.returnValue = false;
    }
    return false;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,380评论 0 7
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,582评论 0 8
  • 人 旺财病了,拉稀,把家里搞得臭臭的,我上网查查资料。 没错,旺财就是我养的狗的名字,从这个草率的取名就能看出,我...
    胡偲阅读 2,256评论 0 0
  • 我的购物理念简单直接:看中就会去买,而且要买就买经典产品。这个购物理念是由经验教训总结出来的。以前想买某种产品的时...
    William孙筱奇阅读 3,873评论 0 0
  • 是夜。 宋兰亭轻轻悄悄从穆府别院的后门走出,午夜的穆府早已进入梦乡,而今晚,穆山宿在毛冰梅房里。 “王群少,你来了...
    惠子由人_静安阅读 903评论 0 0