el-input设置后缀显示单位并阻止滚轮微调的解决方法
项目中收集form表单信息时，有时会需要在el-input后面显示单位，效果如图：
当然，我们可以直接在输入框后面加上单位，但直接给输入框上加单位不管是视图上还是用户体验上看起来都要好一点
element-plus / element-ui给我们提供了对应插槽
图中效果显然是尾部内容，因此只需要使用suffix插槽即可实现该效果
<el-input v-model='data'> <template #suffix>元</template> </el-input>
这里我要提一个额外的内容，由于我这里收集的是数字，因此我给el-input设置了type=‘number’，但总是不知道什么情况，有时输入框中的数值比我输入的有细微出入
其实，后来无意间发现是输入框的滚轮滚动事件，一般给el-input添加了type='number’后，输入框后面会出现上下两个箭头可以对数值进行微调。
如果鼠标光标在输入框内并聚焦时，滚动滚轮也会微调数值，因此我就出现了这个问题，输入完数值，此时鼠标还聚焦在输入框内，滚动滚轮(因为我填写内容较多这个页面有滚动条需要滚动到上方/下方去填写别的内容)，此时我输入框中的数值就会因为我滚动滚轮进行了微调，出现数值与输入的数值不一致
解决方法，就是阻止el-input滚轮事件的默认行为
<template>
<el-input v-model='data' @wheel='preventScroll'>
<template #suffix>元</template>
</el-input>
</template>
<script>
export default {
data(){
return {
data
}
},
methods:{
preventScroll(e){
e.preventDefault()
}
}
}
</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;
}
到此这篇关于el-input设置后缀显示单位并阻止滚轮微调的解决方法的文章就介绍到这了,更多相关el-input设置后缀显示单位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目中页面底部出现白边及空白区域错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue3+vite引入插件unplugin-auto-import的方法
这篇文章主要介绍了vue3+vite引入插件unplugin-auto-import的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了Vue实现点击导航栏当前标签后变色功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了vue数组动态刷新失败问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue中scrollIntoView()方法详解与实际运用举例
这篇文章主要给大家介绍了关于Vue中scrollIntoView()方法详解与实际运用举例的相关资料,该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue $mount 和 el的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了Element实现动态增加多个输入框并校验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要给大家介绍了Vue自定义指令实现卡片翻转功能的代码示例,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的参帮助,需要的朋友可以参考下2023-11-11
最近学习threejs有些时间了,就想着着手做些东西,下面这篇文章主要给大家介绍了关于vue3中如何用threejs画一些简单的几何体的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
最新评论