如何在el-input类型type=“number“ 时取消右边的上下箭头
VUE+ElementUI 使用el-input类型type=“number” 时,取消右边的上下箭头
问题描述
在使用elementUI的el-input组件时,想要输入框只输入数字,于是设置了类型属性type=“number” ,但是右边出来了进步上下箭头
默认效果
最终实现效果
代码
<div class="tableForm">
<el-input v-model="value" type="number" placeholder="请输入内容" clearable />
</div>
解决方案
一、全局解决生效
在style里面添加以下代码即可取消所有el-input类型type="number"的右边箭头
<style lang="scss">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
inpit {
border: none
}
</style>
二、仅局部当前页面生效
1. 通过父级元素添加指定类名去寻找对应的el-input
案例:取消所有父级元素类名为tableForm下面的el-input类型type="number"的右边箭头
<style lang="scss">
.tableForm {
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
inpit {
border: none
}
}
</style>
2. style上添加 scoped 属性
当前页面style样式上使用scoped属性,来避免影响其他页面样式,只在当前页生效,但是按照1的方法直接样式拿过来却没有任何效果,样式不起作用,因此需要使用 深度选择器 /deep/ 去寻找
<style scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/ input[type="number"] {
-moz-appearance: textfield;
}
/deep/ inpit {
border: none
}
</style>
以上是个人经验,希望对大家有所帮助!