首页 > 其他分享 >前端Vue自定义数字输入框 带加减按钮的数字输入框组件

前端Vue自定义数字输入框 带加减按钮的数字输入框组件

时间:2023-06-23 09:01:08浏览次数:50  
标签:Vue 数字 自定义 加减 输入框 按钮

前端Vue自定义数字输入框 带加减按钮的数字输入框组件, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13163

效果图如下:

cc-numbox

使用方法


<!-- title: 标题  isSetMax: 是否设置最大值  maxNum: 最大值-->

<cc-numbox title="商品数量(设置最大值)" :isSetMax="true" maxNum="20"

HTML代码实现部分


<template>

<view class="content">

<view style="height: 20px;"></view>

<!-- title: 标题  isSetMax: 是否设置最大值  maxNum: 最大值-->

<cc-numbox title="基本用法" @change="numChangeClick"></cc-numbox>

<view style="height: 20px;"></view>

<!-- title: 标题  isSetMax: 是否设置最大值  maxNum: 最大值-->

<cc-numbox title="商品数量(设置最大值)" :isSetMax="true" maxNum="20" @change="numChangeClick"></cc-numbox>

</view>

</template>

<script>

export default {

components: {

},

data() {

return {

}

},

methods: {

numChangeClick(num) {

console.log("当前数量 = " + num);

}

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

</style>

标签:Vue,数字,自定义,加减,输入框,按钮
From: https://www.cnblogs.com/ccVue/p/17498723.html

相关文章

  • 前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件
    前端Vue自定义简单好用商品分类列表组件侧边栏商品分类组件 ,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13148效果图如下:cc-defineCateList使用方法<!--data:商品列表数组[{navtitle:标题shop:[]展示列表}]@click:商品条目点击事......
  • 【剑指Offer】37、数字在排序数组中出现的次数
    【剑指Offer】37、数字在排序数组中出现的次数题目描述:统计一个数字在排序数组中出现的次数。例如,输入排序数组{1,2,3,3,3,3,4,5}和数字3,由于数字3在该数组中出现了4次,所以函数返回4。解题思路:既然输入的数组是有序的,所以我们就能很自然的想到用二分查找算法。以题目中给的数......
  • Java Web自定义MVC框架详解
    最近给学生讲JavaWeb,希望他们能够在学完这部分内容后自己实现一个MVC框架。但是突然发现百度上能搜索到的靠谱的资料并不是很多,有些只是原理没有代码实现,有些有代码实现但是对于初学者来说理解起来还是比较困难,于是决定把自己讲自定义MVC框架的内容放在这里分享给大家,不仅仅是代码......
  • Java读取excel中日期格式结果为数字xxx天
    解释:Java读取excel中日期结果是计算1900-0-1之后到当前日期,一共有多少天,需要做一下转换处理/***用于计算1900-0-1之后的day天日期是哪天*举例:1900-0-1之后的44326天日期是2021/5/10*@return*/publicstaticStringdayToDate(intday){......
  • 数字电源实测esp32和ads1115的adc精度
    0.01v精度数字电源校准esp32和ads1115的adc精度: ads1115 16bit芯片:......
  • localStorage如何设置过期时间 (如何封装自定义localStorage)
    1、创建Storage类定义对应的getsetremoveclearapi通过set函数添加过期时间参数来实现过期时间的记录设置存储时存储当前值和过期时间get取值的时候先验证当前值是否存在以及时间是否大于过期时间如果存在且不大于过期时间既可返回对应的值否则返回空classStorage......
  • python 将中文数字转换成阿拉伯数字
    日常遇到的中文数字主要有两种情况:1.“二零零一”这种类型,只包含[0-9]对应的十个中文字,需要转换成数字:2001。这种情况的转换十分简单。2.“三百二十一”这种类型,还有“十百千万亿……”等汉字,需要转换成数字:321,这种情况比较复杂。考虑:1.“四千三百二十一”,即万以内的数......
  • 智能制造中的数字化安全与网络安全
    目录智能制造中的数字化安全与网络安全是当前智能制造领域的重要话题之一,随着数字化进程的不断加速,智能制造系统的安全性问题也越来越突出。本文将从技术原理、实现步骤、应用示例与代码实现等方面进行阐述,旨在帮助读者深入理解数字化安全与网络安全的重要性,以及如何通过技术手段......
  • 智能制造中的数字化制造技术
    目录引言智能制造是一个快速发展的领域,它涉及到从原材料的采购到产品的制造和交付的所有环节。数字化制造技术是智能制造的核心,它利用计算机技术和物联网技术对制造过程进行智能化管理和控制,以提高生产效率和质量,降低成本,提高竞争力。本文将介绍智能制造中的数字化制造技术,以......
  • 智能制造中的数字化安全与数字化转型
    目录智能制造中的数字化安全与数字化转型随着智能制造技术的迅速发展,数字化安全与数字化转型已成为企业应对安全风险和挑战的重要手段。在这篇文章中,我们将讨论智能制造中的数字化安全与数字化转型的核心概念和技术原理,并介绍实现步骤和优化改进的方法。引言智能制造是指利用......