el-input设置后缀表现单位并制止滚轮微调

项目中收集form表单信息时，有时会必要在el-input后面表现单位，结果如图：

当然，我们可以直接在输入框后面加上单位，但直接给输入框上加单位不管是视图上照旧用户体验上看起来都要好一点
element-plus / element-ui给我们提供了对应插槽

图中结果显然是尾部内容，因此只必要使用suffix插槽即可实现该结果

1. <el-input v-model='data'>
2.         <template #suffix>元</template>
3. </el-input>

复制代码

  这里我要提一个额外的内容，由于我这里收集的是数字，因此我给el-input设置了type=‘number’，但总是不知道什么环境，有时输入框中的数值比我输入的有细微收支
  其实，后来无意间发现是输入框的滚轮滚动事件，一样寻常给el-input添加了type='number’后，输入框后面会出现上下两个箭头可以对数值举行微调。
假如鼠标光标在输入框内并聚焦时，滚动滚轮也会微调数值，因此我就出现了这个标题，输入完数值，此时鼠标还聚焦在输入框内，滚动滚轮(因为我填写内容较多这个页面有滚动条必要滚动到上方/下方去填写别的内容)，此时我输入框中的数值就会因为我滚动滚轮举行了微调，出现数值与输入的数值不同等
解决方法，就是制止el-input滚轮事件的默认行为

1. <template>
2. <el-input v-model='data' @wheel='preventScroll'>
3.         <template #suffix>元</template>
4. </el-input>
5. </template>
6. <script>
7. export default {
8.         data(){
9.                 return {
10.                         data
11.                 }
12.         },
13.         methods:{
14.                 preventScroll(e){
15.                         e.preventDefault()
16.                 }
17.         }
18. }
19. </script>

复制代码

  这里还有一点是我不必要上下箭头的微调，所以用css样式将上下箭头隐藏掉，给el-input设置类名no-controls，代码如下：
:deep.no-controls input::-webkit-inner-spin-button,
:deep.no-controls input::-webkit-outer-spin-button{
-webkit-appearance: none !important;
}
:deep.no-controls input[type=“number”]{
-moz-appearance: textfield;
}

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。