Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能


Posted in Javascript onApril 09, 2020

实现效果

UI组件依然是使用 Quasar Framework。

先来看一下效果:

Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能

加减.gif

input type="number" 去掉上下小箭头

去掉上下小箭头,主要是css:

input::-webkit-outer-spin-button, 
 input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 }

 input[type='number'] {
 -moz-appearance: textfield;
 }

实现加减按钮样式及功能

template:

<div class="row mg">
 <div class="col-5 text-right form-label-sm">
  <span class="number">数字</span>
  <span class="tips">(必填)</span>
 </div>
 <div class="col-6">
  <q-input v-model.number="model" type="number" outlined class="input">
  <template v-slot:prepend>
  <q-btn
  dense
  flat
  icon="remove"
  class="number-btn"
  @click="numberSub(model)"
  />
  </template>
  <template v-slot:append>
  <q-btn
  dense
  flat
  icon="add"
  class="number-btn"
  @click="numberAdd(model)"
  />
  </template>
  </q-input>
 </div>
 </div>

     css:

<style lang="stylus">
.form-label-sm {
 font-weight: 400;
 font-size: 12px;
 line-height: 32px;
 padding-right: 16px;

 .number {
 font-weight: 500;
 font-size: 13px;
 display: block;
 line-height: 18px;
 }

 .tips {
 font-weight: 400;
 font-size: 12px;
 display: block;
 line-height: 13px;
 color: rgba(150, 156, 163, 1);
 }
}

.input {
 width: 200px;

 div {
 height: 32px !important;
 padding: 0 2px;
 }

 div.no-wrap, .q-btn__wrapper {
 padding: 0;
 }

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 }

 input[type='number'] {
 -moz-appearance: textfield;
 }

 input {
 text-align: center;
 }

 .number-btn {
 background-color: #f5f7f9;
 border: 1px solid #ccc;
 height: 100%;
 }
}
</style>
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)
 }

完整代码

请查看:Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式点击预览

总结

到此这篇关于Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式的文章就介绍到这了,更多相关Quasar Input:type="number" 去掉上下箭头内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 #Javascript
微信小程序保存图片到相册权限设置
Apr 09 #Javascript
微信小程序仿通讯录功能
Apr 09 #Javascript
vue cli4下环境变量和模式示例详解
Apr 09 #Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 #Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 #Javascript
加速vue组件渲染之性能优化
Apr 09 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php向js函数传参的几种方法
2014/08/10 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python元字符的用法实例解析
2018/01/17 Python
使用python远程操作linux过程解析
2019/12/04 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
常务副总经理任命书
2014/06/05 职场文书
标准单位租车协议书
2014/09/23 职场文书
编写python程序的90条建议
2021/04/14 Python