去掉element中input type=number尾部上下小箭头以及上下滚动,input框里值变动的效果

  1. 引用element中的input type=number组件
<el-input type="number" v-model.number="numberData"></el-input>
  1. 去掉input type=number尾部上下小箭头采用CSS样式重置的方式
/* element样式重置 start */
/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,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;
}
input[type="number"]{
  -webkit-appearance:textfield;
  -moz-appearance:textfield;
  -o-appearance:textfield;
  -ms-appearance:textfield;
  appearance:textfield;
}
/* 去掉input尾部上下小箭头 end */
  1. 去掉上下滚动鼠标,input type=number框里值变动的效果
    在el-input加上@mousewheel.native.prevent来阻止鼠标滚动
<el-input type="number" v-model.number="numberData" @mousewheel.native.prevent></el-input>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。