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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
js tab 选项卡
Apr 26 Javascript
js 居中漂浮广告
Mar 21 Javascript
jquery实用代码片段集合
Aug 12 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
js验证账户名是否重复
May 26 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计算十二星座的函数代码
2012/08/21 PHP
PHP多进程编程实例
2014/10/15 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
opencv python图像梯度实例详解
2020/02/04 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Python编写万花尺图案实例
2021/01/03 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
python中yield的用法详解
2021/01/13 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
理货员的岗位职责
2013/11/23 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
煤矿班组长的职责
2013/12/25 职场文书
超市端午节活动方案
2014/01/23 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
文明班级建设方案
2014/05/15 职场文书
环境保护标语
2014/06/20 职场文书
赔偿协议书
2015/01/27 职场文书