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 相关文章推荐
JQuery替换DOM节点的方法
Jun 11 Javascript
jQuery插件制作的实例教程
May 16 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PHP fclose函数用法总结
2019/02/15 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
关于Python数据结构中字典的心得
2017/12/04 Python
Python实现简易Web爬虫详解
2018/01/03 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python中reader的next用法
2018/07/24 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
详解Python多线程下的list
2020/07/03 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
护士求职推荐信范文
2013/11/23 职场文书
趣味体育活动方案
2014/02/08 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
千手观音观后感
2015/06/03 职场文书
高中地理教学反思
2016/02/19 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android