QuasarInput-type=-number-去掉小上下箭头实现加减按钮样式

时间：2023-03-31 15:47:28 vue.js

.form-label-sm{字体粗细：400；字体大小：12px；行高：32px；填充右：16px；.nu??mber{字体粗细：500；字体大小：13px；显示：块；行高：18px；}.tips{字体粗细：400；字体大小：12px；显示：块；行高：13px；颜色：RGBA（150、156、163、1）；}}.input{宽度：200px；div{height:32px!important;填充：02px；}div.no-wrap,.q-btn__wrapper{填充：0;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;}input[type='number']{-moz-appearance:textfield;}输入{文本对齐：居中；}.number-btn{背景颜色：#f5f7f9;边框：1px实心#ccc；高度：100%；}}效果UI组件的实现仍然使用QuasarFramework。先来看看效果：inputtype="number"去掉上下小箭头，主要是css:input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit外观：无；}input[type='number']{-moz-appearance:textfield;}实现加减按钮样式及功能模板：number(required)

css:.form-label-sm{字体粗细：400；字体大小：12px；行高：32px；填充右：16px；.nu??mber{字体粗细：500；字体大小：13px；显示：块；行高：18px；}.tips{字体粗细：400；字体大小：12px；显示：块；行高：13px；颜色：RGBA（150、156、163、1）；}}.input{宽度：200px；div{height:32px!important;填充：02px；}div.no-wrap,.q-btn__wrapper{填充：0;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;}input[type='number']{-moz-appearance:textfield;}输入{文本对齐：居中；}.number-btn{背景颜色：#f5f7f9;边框：1px实心#ccc；高度：100%；}}data(){return{model:10}}methods:numberAdd(val){//console.log(val)val++this.model=Number.parseFloat(val)},numberSub(val){//console.log(val)val--this.model=Number.parseFloat(val)}请查看完整代码：QuasarInput:type="number"RemoveSmallupanddownarrowsimplementplusandminusbuttonstylesDocumentationQuasar数字类型的输入-HTML(HypertextMarkupLanguage)|MDN