iview elementui 输入框 number类型数字输入框去掉滚动事件

最新推荐文章于 2024-09-05 09:19:52 发布

Tee_

最新推荐文章于 2024-09-05 09:19:52 发布

阅读量896

点赞数

文章标签： elementui view design javascript

本文链接：https://blog.csdn.net/qq_43017024/article/details/126884692

版权

iview也可以以下elementui为例

输入框属性加上
@mousewheel.native.prevent
@wheel.native.prevent=“stopScrollFun($event)”

 <el-input class="must" type="number" @mousewheel.native.prevent maxlength="13"
            @blur="Math.round(Number(detailRes.projectInfo.projectPrice) * 100) / 100<0?detailRes.projectInfo.projectPrice=0:detailRes.projectInfo.projectPrice=Math.round(Number(detailRes.projectInfo.projectPrice) * 100)/100"
            @wheel.native.prevent="stopScrollFun($event)"
            v-model="detailRes.projectInfo.projectPrice" placeholder="请输入最多保留两位小数的正数">
 </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
    },

css里加上这个

/deep/input::-webkit-outer-spin-button,
/deep/input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  appearance: none !important;
  margin: 0;
}
/deep/input[type='number'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  -o-appearance: textfield;
  -ms-appearance: textfield;
  appearance: textfield;
}