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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue实现登录功能
Dec 31 Vue.js
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
微信小程序实现聊天室功能
Jun 14 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
上海无线电三厂简史修改版
2021/03/01 无线电
需要发散思维学习PHP
2009/06/29 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
select组合框option的捕捉实例代码
2008/09/30 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python开发中module模块用法实例分析
2015/11/12 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python实现大量图片重命名
2020/03/23 Python
解决python运行效率不高的问题
2020/07/20 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
中国文明网签名寄语
2014/01/18 职场文书
职工运动会邀请函
2014/01/19 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
公证委托书模板
2014/04/03 职场文书
毕业生就业协议书
2014/04/11 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
建议书的格式及范文
2015/09/14 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
详细分析PHP7与PHP5区别
2021/06/26 PHP