uniapp中组件库的丰富NumberBox 步进器的用法

目录

基本使用

#步长设置

#限制输入范围

#限制只能输入整数

#禁用

#固定小数位数

#异步变更

#自定义颜色和大小

#自定义 slot

API

#Props

#Events

#Slots


基本使用

通过v-model绑定value初始值,此值是双向绑定的,无需在回调中将返回的数值重新赋值给value

<template><u-number-box v-model="value" @change="valChange"></u-number-box>
</template><script>export default {data() {return {value: 0}},methods: {valChange(e) {console.log('当前值为: ' + e.value)}}}
</script>

#步长设置

  • 通过step属性设置每次点击增加或减少按钮时变化的值,默认为1,下面示例每次都会加2或者减2
<u-number-box :step="2"></u-number-box>

#限制输入范围

通过minmax参数限制输的入值最小值和最大值

<u-number-box :min="1" :max="100"></u-number-box>

#限制只能输入整数

通过integer限制输入类型

<u-number-box integer></u-number-box>

#禁用

<!-- 通过设置`disabled`参数来禁用输入框,禁用状态下无法点击加减按钮或修改输入框的值 -->
<u-number-box :disabled="true"></u-number-box><!-- 禁用输入框 -->
<u-number-box :disabledInput="true"></u-number-box><!-- 禁用增加按钮 -->
<u-number-box :disablePlus="true"></u-number-box><!-- 禁用减少按钮 -->
<u-number-box :disableMinus="true"></u-number-box><!-- 禁用长按 -->
<u-number-box :longPress="false"></u-number-box>

#固定小数位数

通过step设置步进长度,decimal-length设置显示小数位数

<u-number-box step="0.25" decimal-length="1" ></u-number-box>

#异步变更

通过asyncChange设置异步变更,开启后需要手动控制输入值 (默认 false )

<template><u-number-box v-model="value" :asyncChange="true" @change="onChange"></u-number-box>
</template><script>
export default {data(){return {value:1}},methods:{onChange(e){setTimeout(() => {this.value = this.value + 1;}, 3000)}}
}
</script>

#自定义颜色和大小

  • 通过button-size参数设置按钮大小
  • 通过icon-style参数设置加减按钮图标的样式
<u-number-box button-size="36"color="#ffffff"bgColor="#2979ff"iconStyle="color: #fff"
></u-number-box>

#自定义 slot

<template><u-number-box v-model="value"><viewslot="minus"class="minus"><u-iconname="minus"size="12"></u-icon></view><textslot="input"style="width: 50px;text-align: center;"class="input">{{value}}</text><viewslot="plus"class="plus"><u-iconname="plus"color="#FFFFFF"size="12"></u-icon></view></u-number-box>
</template><script>
export default {data(){return {value:1}}
}
</script><style lang="scss">.minus {width: 22px;height: 22px;border-width: 1px;border-color: #E6E6E6;border-style: solid;border-top-left-radius: 100px;border-top-right-radius: 100px;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;@include flex;justify-content: center;align-items: center;}.input {padding: 0 10px;}.plus {width: 22px;height: 22px;background-color: #FF0000;border-radius: 50%;/* #ifndef APP-NVUE */display: flex;/* #endif */justify-content: center;align-items: center;}
</style>

API

#Props

参数说明类型默认值可选值
name步进器标识符,在change回调返回String | Number--
value用于双向绑定的值,初始化时设置设为默认min值(最小值)String | Number1-
min用户可输入的最小值String | Number1-
max用户可输入的最大值String | NumberNumber.MAX_SAFE_INTEGER-
step步长,每次加或减的值, 支持小数值,如需小数String | Number1-
integer是否只能输入正整数Booleanfalsetrue
disabled是否禁用操作,包括输入框,加减按钮Booleanfalsetrue
disabledInput是否禁止输入框Booleanfalsetrue
asyncChange是否开启异步变更,开启后需要手动控制输入值Booleanfalsetrue
inputWidth输入框宽度,单位pxString | Number35-
showMinus是否显示减少按钮Booleantruefalse
showPlus是否显示增加按钮Booleantruefalse
decimalLength显示的小数位数String | Number--
longPress是否允许长按进行加减Booleantruefalse
color输入框文字和加减按钮图标的颜色String#323233-
buttonSize按钮大小,宽高等于此值,单位px,输入框高度和此值保持一致String | Number30-
bgColor输入框和按钮的背景颜色String#EBECEE-
cursorSpacing指定光标于键盘的距离,避免键盘遮挡输入框,单位pxString | Number100-
disablePlus是否禁用增加按钮Booleanfalsetrue
disableMinus是否禁用减少按钮Booleanfalsetrue
iconStyle加减按钮图标的样式String--

#Events

事件名说明回调参数
focus输入框得到焦点触发(按钮可点击情况下),对象形式value:输入框当前值,name:步进器标识符
blur输入框失去焦点时触发,对象形式value:输入框当前值,name:步进器标识符
change输入框内容发生变化时触发,对象形式value:输入框当前值,name:步进器标识符
overlimit超过范围阈值时触发type:(minus已达最小值,plus已达最大值)

#Slots

名称说明
minus减少按钮
input输入框
plus增加按钮

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/586358.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

副业踩坑之路(1)

写下这段经历让别人少踩坑吧&#xff0c;随便写的&#xff0c;不好轻喷哈&#xff0c;努力听取广大网友的建议~ 起因 几个月前&#xff0c;我妈妈手机套餐是移动39元的&#xff0c;流量好像才5G。家里开的小店铺里面没有WIFI&#xff0c;生意需要&#xff0c;经常要逛淘宝拼多…

C++知识点总结(11):质因子分解

一、质数和合数 质数 如果一个数除了 1 1 1 和本身&#xff0c;没有其他的因数&#xff0c;就是质数。 合数 如果一个数除了 1 1 1 和本身&#xff0c;还有其他的因数&#xff0c;就是合数。 小贴士 1 1 1 是一个例外&#xff0c;既不是质数&#xff0c;也不是合数。 二、求…

linux安装python

文章目录 前言一、下载安装包二、安装1.安装依赖2.解压3.安装4.软链接5.验证 总结 前言 本篇文章介绍linux环境下安装python。 一、下载安装包 下载地址&#xff1a;官方网站 我们以最新的标准版为例 二、安装 1.安装依赖 yum -y install openssl-devel ncurses-devel li…

3.pytorch cifar10

数据集 CIFAR10 是由 Hinton 的学生 Alex Krizhevsky、Ilya Sutskever 收集的一个用于普适物体识别的计算机视觉数据集&#xff0c;它包含 60000 张 32 X 32 的 RGB 彩色图片&#xff0c;总共 10 个分类。 这些类别分别是飞机、汽车、鸟类、猫、鹿、狗、青蛙、马、船和卡车。其…

服务号和订阅号哪个好

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;在推送频率上来看&#xff0c;服务号每月能推送四条消息&#xff0c;而订阅号可以每天&#xff08;24小时&#xff09;推送一条消息。如果企业开通公众号的目的是提供服务&#xff0c;例如售前资讯…

动态规划 | 鸡蛋问题 | 元旦假期来点“蛋”题

文章目录 鸡蛋掉落 - 两枚鸡蛋题目描述动态规划解法问题分析程序代码 鸡蛋掉落题目描述问题分析程序代码复杂度分析 鸡蛋掉落 - 两枚鸡蛋 题目描述 原题链接 给你 2 枚相同 的鸡蛋&#xff0c;和一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 …

我的学习C#回炉学习日志——Lua热更新06_模块

模块 个人理解&#xff1a;lua的包比起C#&#xff0c;基本上就是一个table记录所有信息&#xff0c;包括变量、常量等 module {} module.constant "一个常量" function module.func1()io.write("一个共有函数\n") endlocal function func2()-- bodypr…

C语言注释的使用与理解

什么是注释&#xff1f; 在编程中&#xff0c;注释&#xff08;Comment&#xff09;是一种非执行文本&#xff0c;它用于为代码提供解释、说明和文档。注释的内容不参与程序的实际编译和运行过程&#xff0c;其主要目的是提高代码的可读性和可维护性&#xff0c;方便开发者以及…

MySQL:排序和分组

1、排序 order by 用于对结果集按照一个列或者多个列进行排序。默认按照升序对记录进行排序&#xff0c;如果需要按照降序对记录进行排序&#xff0c;可以使用 desc 关键字。 order by 对多列排序的时候&#xff0c;先排序的列放前面&#xff0c;后排序的列放后面。并且&…

Python字典类型key找value或者value找key方法汇总

字典中&#xff0c;如何通过唯一的value获取key 如果传入的值在字典的值中不存在&#xff0c;可以返回一个特定的默认值或者抛出一个异常来表示该情况。以下是两种处理方式的示例&#xff1a; 返回默认值&#xff1a; def get_key_by_value(dictionary, value, defaultNone)…

JavaScript:函数隐含对象arguments/剩余参数. . .c/解构赋值

除了this&#xff0c;在函数内部还存在着一个隐含的参数arguments arguments 是一个类数组对象&#xff08;伪数组&#xff09; 调用函数时传递的所有实参&#xff0c;都被存储在arguments中 arguments[0] 表示的是第一个实参 arguments[1] 表示的是第二个实参 以此类推..…

2022年全球运维大会(GOPS深圳站)-核心PPT资料下载

一、峰会简介 GOPS 主要面向运维行业的中高端技术人员&#xff0c;包括运维、开发、测试、架构师等群体。目的在于帮助IT技术从业者系统学习了解相关知识体系&#xff0c;让创新技术推动社会进步。您将会看到国内外知名企业的相关技术案例&#xff0c;也能与国内顶尖的技术专家…

【数据结构】链式家族的成员——循环链表与静态链表

循环链表与静态链表 导言一、循环链表1.1 循环单链表1.2 循环双链表 二、静态链表2.1 静态链表的创建2.2 静态链表的初始化2.3 小结 结语 导言 大家好&#xff01;很高兴又和大家见面啦&#xff01;&#xff01;&#xff01; 经过前面的介绍&#xff0c;相信大家对链式家族的…

软件测试/测试开发丨Mac Appium环境搭建

Mac 上 Appium 环境搭建 安装 nodejs 与 npm 安装方式与 windows 类似 &#xff0c;官网下载对应的 mac 版本的安装包&#xff0c;双击即可安装&#xff0c;无须配置环境变量。官方下载地址&#xff1a;https://nodejs.org/en/download/ 安装 appium Appium 分为两个版本&a…

【Transformer】深入理解Transformer模型1——初步认识了解

前言 Transformer模型出自论文&#xff1a;《Attention is All You Need》 2017年 近年来&#xff0c;在自然语言处理领域和图像处理领域&#xff0c;Transformer模型都受到了极为广泛的关注&#xff0c;很多模型中都用到了Transformer或者是Transformer模型的变体&#xff0…

ElasticSearch--基本操作

ElasticSearch 完成ES安装 http://101.42.93.208:5601/app/dev_tools#/console 库的操作 创建索引库 请求方式&#xff1a;PUT 请求路径&#xff1a;/索引库名&#xff0c;可以自定义 请求参数&#xff1a;mapping映射 PUT /test {"mappings": {"propertie…

计算机硬件 4.3显示器

第三节 显示器 一、基本概念 1.定义&#xff1a;将电信号转换为可以直接看到的图像的最基本输出设备。 2.分类&#xff1a;按显示色彩分&#xff1a;单色显示器、彩色显示器。 按显示原理分&#xff1a;CRT显示器、LCD显示器、LED显示器、OLED显示器。 3.原理结构&#xff…

【Oracle】 Oracle Sequence 性能优化

Sequence是很简单的&#xff0c;如果最大程度利用默认值的话&#xff0c;我们只需要定义sequence对象的名字即可。在序列Sequence对象的定义中&#xff0c;Cache是一个可选择的参数。默认的Sequence对象是有cache选项的&#xff0c;默认取值为20。这个默认值对于大多数情况下都…

云原生|kubernetes|kubernetes资源备份和集群迁移神器velero的部署和使用

前言&#xff1a; kubernetes集群需要灾备吗&#xff1f;kubernetes需要迁移吗&#xff1f; 答案肯定是需要的 那么&#xff0c;如何做kubernetes灾备和迁移呢&#xff1f;当然了&#xff0c;有很多的方法&#xff0c;例如&#xff0c;自己编写shell脚本&#xff0c;或者使用…

2023年江苏省职业院校技能大赛高职组“软件测试”赛项接口测试答案报告(含术语)

2023年江苏省职业院校技能大赛高职组“软件测试”赛项接口测试答案报告 接口测试要求: 1、执行接口测试 本部分按照软件接口测试文档要求,执行接口测试;使用接口测试工具PostMan,编写脚本、配置参数、执行接口测试并且截图。截图需粘贴在接口测试总结报告中。接口测试具体…