正常情况,输入了步长为1,是无法在输入小数的。需求是要能输入一位小数,但如果直接步长设为0.1,又不能按1这样递增,输入数量上用起来肯定很麻烦。
于是我就想了一个折中方法,步长设为:1.01,然后值改变的时候,change事件里,四舍五入,保留一位小数,这样就能实现点击输入框左右的加减 ,页面显示的就是按1的增长变化,手动输入的时候,又能输入小数。
以上思路,希望能给其他人带来帮助。
另一个问题:与上面无关
另外在做按0.5的倍数增长,step设为0.5,但是手动输入的值也要是0.5的倍数,如果不是,就在change事件里,ceil一下,这样做会有一个问题:
当 box 绑定的值已经是2了,这是change获得的值是1.3,向上取整,得到2,但是vue不会去渲染,因为值没变化,这个时候,需要使用nexttick更新值。

uniapp uni-number-box组件 步长为1,还能输入小数思路分享的更多相关文章

  1. rtvue-lowcode:一款基于uniapp框架和uview组件库的开源低代码开发平台

    rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目 ...

  2. type为number的input标签输入小数的方法

    纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了! 看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出. 方法如下: <input ty ...

  3. input标签type为number时,输入小数,在Firefox浏览器上输入框标红的问题

    问题一:firefox 下 默认情况 <input   type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...

  4. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  5. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  6. uniapp自定义简单弹窗组件

    2.0(2019-08-31) 船新版本的信息弹窗组件 插件市场地址:http://ext.dcloud.net.cn/plugin?id=672 可以弹出很多条信息,并单独控制消失时间.点击消失. ...

  7. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

  8. uni-app项目导入第三方组件库muse-ui

    你说uni-app是什么 我说,uni-app是一套基于vue.js开发跨平台应用的前端框架,可编译多个平台,比如:Android.IOS.H5.微信小程序.支付宝小程序.头条小程序.百度小程序 懂行 ...

  9. uniapp uni.navigateTo 传值传对象

    uni.navigateTo({ url: '/pages/details?obj='+ encodeURIComponent(JSON.stringify(item)) }); 接收: onLoad ...

  10. uniapp解决测评有组件导出风险,解决APP反编译,回编译后app无法打开的问题

    1.APP反编译 使用hbx云打包,打包出apk 拿到apk后,先下载反编译工具 https://pan.baidu.com/s/1A5D8x_pdSELlHYl-Wl6Xnw 提取码 6vzd 使用 ...

随机推荐

  1. 数据库SQL(MSSQLSERVER)服务启动错误代码3414

    昨天永和客户联系我,说他们的前台系统报错了,给我发了报错的图片.看到错误的第一眼就知道是数据库出问题了,连不上sql Server. 虽然知道是数据库出问题了,但是刚开始的时候没有打开SQL Serv ...

  2. 重新点亮linux 命令树————进程的控制[二十二]

    前言 简单整理一下进程的控制 正文 进程优先级 nice 从-20-19,值越小,优先级越高 renice 从新设置优先级 进程的作业控制: job 那么先来创建一个进程. 那么使用top -p 26 ...

  3. .netcore 使用Quartz定时任务

    这是一个使用 .NET Core 和 Quartz.NET 实现定时任务的完整示例.首先确保已经安装了 .NET Core SDK.接下来按照以下步骤创建一个新的控制台应用程序并设置定时任务: 创建一 ...

  4. RocketMQ实战系列(一)——RocketMQ简介

    RocketMQ是一款分布式消息引擎,由阿里巴巴旗下的MetaQ和RocketMQ合并而来.RocketMQ提供了高可靠.高吞吐量.可伸缩.易于使用的消息发布/订阅服务,适用于大规模分布式系统的消息通 ...

  5. 见鬼了!我家的 WiFi 只有下雨天才能正常使用...

    这是作者大学时期在家里遇到的一个非常奇怪的网络问题,作者的父亲是一名经验丰富的网络工程师,他们家里使用了一个复杂的网络设置,通过 Wi-Fi 桥接的方式,将父亲公司的高速商业网络连接到家中.但是有一天 ...

  6. 安装Visual Studio 2010 教程

    1.下载软件 方法一:关注[ 火耳软件安装 ]公众号获取软件,里面还有很多类型的其他软件 或者: 方法二:我的分享链接:https://pan.baidu.com/s/1_Ow2YR-kbnbSc6o ...

  7. 使用日志上下文聚合插件使能上下文查询及Livetail

    简介: 日志上下文浏览是排查业务故障时常用的方式,但受限于Logtail插件系统的设计,在Logtail 1.2.1版本前,如果用户使用Logtail插件来处理日志或采集容器的标准输出,那么用户将无法 ...

  8. 阿里云 ACK 容器服务生产级可观测体系建设实践

    简介: 随着容器被越来越对企业接纳与落地,可观测成为重点.那么,让我们深入了解阿里云 ACK 容器服务生产级可观测体系建设实践,为自身业务可观测提供参考- 作者:冯诗淳(行疾)   ACK 可观测体系 ...

  9. 同为博客,不同风格 ——Hexo另类搭建

    ​简介:通过阿里云云开发平台快速由Hexo创建赛博朋克风格的博客. 一  .通过云开发平台快速创建初始化应用 1.创建相关应用模版请参考链接:Hexo博客框架-轻量.一令部署 2.完成创建后就可以在g ...

  10. Spring Cloud Gateway一次请求调用源码解析

    简介: 最近通过深入学习Spring Cloud Gateway发现这个框架的架构设计非常简单.有效,很多组件的设计都非常值得学习,本文就Spring Cloud Gateway做一个简单的介绍,以及 ...