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

news2024/9/20 20:42:05

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

效果图如下:

# cc-numbox

#### 使用方法

```使用方法

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

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

```

#### HTML代码实现部分

```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>

```

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

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

相关文章

手把手叫你学会搭建FreeRTOS工程文件

手把手教你学会搭建FreeRTOS工程文件 一.序言二.提取文件2.1 Source文件夹2.2 portble文件夹2.3 Demo 文件夹 三.建立FreeRTOS工程3.1 新建FreeRTOS目录3.2 移植src文件夹3.3 移植port文件夹3.4 添加include文件夹3.5 提取FreeRTOSConfig.h文件3.5.1 拷贝FreeRTOSConfig.h文件 …

前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

前端Vue自定义简单实用轮播图封装组件 快速实现轮播图&#xff0c; 下载完整代码请访问uni-app插件市场地址&#xff1a;https://ext.dcloud.net.cn/plugin?id13153 效果图如下&#xff1a; # cc-mySwiper #### 使用方法 使用方法 <!-- 自定义轮播图 swiperArr: 轮播数…

Day5——数据库基础2-SQL查询语句

网络安全学习笔记Day5 SQL查询语句&#xff08;重在实操&#xff01;&#xff01;&#xff01;&#xff09; 回顾1.中英文符号混淆2.数据库的操作流程&#xff08;回顾mysql相关语句&#xff09;3.“everything”工具 学习目标1.查询数据基本语法形式基本查询语句表单查询where…

ubuntu20下yolov4训练多目标实战

1、安装nvidia驱动和cudnn,不熟悉的小伙伴请移步&#xff1a;Ubuntu20.04安装NVIDIA显卡驱动、CUDA、CUDNN及突破NVENC并发限制_ubuntu20.04安装显卡驱动_BetterJason的博客-CSDN博客 2、编译opencv&#xff0c;不熟悉的小伙伴请移步:ubuntu20.04 和centos8平台opencv4.5.3&am…

【八大排序(九)】计数排序-非比较排序法

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:八大排序专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习排序知识   &#x1f51d;&#x1f51d; 计数排序 1. 前言2. 计数排序基本思路3. …

6.19 Nginx网站服务——服务基础

文章目录 一.Nginx服务基础1.关于Nginx的特点2.简述Nginx和Apache的差异3.Nginx 相对于 Apache 的优点4.Apache 相对于 Nginx 的优点5.阻塞与非阻塞6.同步与异步7.nginx的应用场景 二.编译安装nginx服务1.在线安装nginx1.1 yum部署Nginx1.2 扩展源安装完后直接安装Nginx 2.ngin…

【Red Hat 7.9---详细安装Oracle 11g】---静默方式安装

【Red Hat 7.9---详细安装Oracle 11g】---静默方式安装 &#x1f53b; 一、安装前规划&#x1f53b; 二、安装前准备一&#xff08;系统参数修改&#xff09;⛳ 2.1 内核版本、系统版本查看⛳ 2.2 修改主机名-重启生效⛳ 2.3 关闭selinux⛳ 2.4 防火墙设置1521端口开放⛳ 2.5 系…

哈希密码的加盐强化

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、什么是哈希加密&#xff1f; 二、哈希加密…

讯飞星火大模型详细内测体验:看它能否应对这些挑战?

名人说&#xff1a;一花独放不是春&#xff0c;百花齐放花满园。——《增广贤文》 作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、简要介绍二、分类问题测试0️⃣自我介绍1️⃣语言理解2️⃣知识问答3️⃣逻辑推…

“房地一体”专用系列:DG3M、D2M产品发布

基于“房地一体”项目的作业特点&#xff0c;睿铂听取客户作业过程中的需求反馈&#xff0c;在D2PSDK、D3PSDK基础之上推出全新中端产品&#xff1a;D2M和DG3M。 D2M适用于地势平坦区域的房地一体项目&#xff0c;DG3M适用于落差较大场景的房地一体项目和智慧城市三维建模项目…

【面试】标准库相关题型(二)

文章目录 1. deque底层实现原理1.1 概述1.2 原理图1.3 类结构1.4 操作函数 2. 什么时候使用vector、list、deque2.1 vector2.2 list2.3 deque 3. priority_queue的底层实现原理3.1 一句话概括&#xff1a;用堆来实现优先级队列3.2 堆结构3.3 底层容器3.4 STL对堆结构提供的接口…

计算机网络-物理层

目录 一、物理层的基本概念 二、物理层下的传输媒体 &#xff08;一&#xff09;引导型传输媒体 &#xff08;二&#xff09;非引导型传输媒体 三、传输方式 &#xff08;一&#xff09;串行传输和并行传输 &#xff08;二&#xff09;同步传输和异步传输 &#xff08;…

STL之位图(bitset)

目录 位图bitset介绍bitset使用 模拟实现位图的应用——题目总结 位图 bitset介绍 参考文档:bitset 在 C STL 中&#xff0c;std::bitset 是一个固定大小的容器类&#xff0c;用于表示二进制位序列。它可以被看作是一个长度固定为 N 的布尔数组&#xff0c;其中每个元素只有两…

[Selenium] 通过Java+Selenium查询文章质量分

文章目录 前言一、环境准备二、查询文章质量分2.1、修改pom.xml配置2.2、配置Chrome驱动2.3、引入浏览器配置2.4、设置无头模式2.5、启动浏览器实例&#xff0c;添加配置信息2.6、访问质量分地址2.7、窗口设置2.8、定位到输入框并输入博文地址2.9、定位到查询按钮并点击2.10、强…

三、Docker的基本组成和常用命令(二)

文章目录 容器命令创建并启动容器列举运行的容器退出容器命令启动容器重启容器停止容器强制停止容器删除容器 常用其他命令后台启动容器查看运行日志查看容器中的进程信息查看容器或镜像的元数据进入当前正在运行的容器从容器内拷贝文件到主机上 容器命令 说明&#xff1a;有镜…

【Linux】常用指令(二)

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 man指令 echo指令 补充: echo和cat的区别&#xff1f; CP指令 mv命令 ctrlc 指令 which指令 学习中遇到得问题: 1.如何看待指令&#xff1f; 2.在执行指令之前&#xf…

【MySQL】不就是MySQL——子查询

前言 今天我们来学习多表查询的下一个模块——子查询&#xff0c;子查询包括了标量子查询、列子查询、行子查询、表子查询&#xff0c;话不多说我们开始学习。 目录 前言 目录 一、子查询 1. 子查询的概念 2. 子查询语法格式 2.1 根据子查询结果不同可以分为&#xff1a;…

全志V3S嵌入式驱动开发(基于usb otg的spi-nor镜像烧入)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 说到了用usb otg来实现spi nand flash的烧入&#xff0c;这中间主要用到了PhoenixSuit软件。那么怎么用usb otg来实现spi nor flash的烧入呢&#…

从零开始 Spring Boot 47:缓存

从零开始 Spring Boot 47&#xff1a;缓存 图源&#xff1a;简书 (jianshu.com) Spring 提供一个简单但使用的缓存&#xff08;Cache&#xff09;机制&#xff0c;我们可以利用它来优化代码执行效率。 简单示例 老规矩&#xff0c;我们从一个简单示例开始&#xff1a; Serv…

RedHat红帽认证---RHCSA

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; RHCSA node1 1.配置网络设置 将 node1 配置为具有以下网络配置&#xff1a;主机名&#xff1a;node1.domain250.example.comIP 地址&#xff1a;172.25.250.100子网…