value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!!
1、概述
vue组件开发的api:props、events和slots
2、组件代码
效果:
(1)index.html
数字输入框组件
(2)input-number.js
//验证输入值是否为数字
function isvaluenumber(value) {
return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + '');
}
vue.component('input-number', {
//模板
template: `
-
+
`,
//props实现与父组件的通信(父组件-->子组件)
//对每个props进行校验,props的值可以是数组,也可以是对象
props: {
max: {
//必须是数字类型
type: number,
//默认值为infinity
default: infinity
},
min: {
type: number,
default: -infinity
},
value: {
type: number,
default: 0
}
},
//vue组件为单向数据流,声明data来引用父组件的value,在组件内部维护currentvalue
data: function() {
return {
currentvalue: this.value
}
},
//监听:与父组件通信 (子组件-->父组件)
watch: {
currentvalue: function(val) {
//使用v-model改变value
//this指向当前组件实例
this.$emit('input', val)
}
// ,
//本示例未使用自定义函数,使用了v-mode input函数来更新value
// value: function(val) {
// //自定义事件on-change,告知父组件数字输入框值有所改变
// this.$emit('on-change', val)
// }
},
methods: {
//父组件传递过来的值可能不符合条件(大于最大值,小于最小值)
updatevalue: function(val) {
if(val > this.max) {
val = this.max;
}
if(val < this.min) {
val = this.min;
}
this.currentvalue = val;
},
handledown: function() {
if(this.currentvalue <= this.min) {
return;
}
this.currentvalue -= 1;
},
handleup: function() {
if(this.currentvalue >= this.max) {
return;
}
this.currentvalue += 1;
},
handlechange: function(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isvaluenumber(val)) {
val = number(val);
this.currentvalue = val;
if(val > max) {
this.current = max;
}
if(val < min) {
this.current = min;
}
} else {
//如果输入的不是数字,将输入的内容重置为之前的currentvalue
event.target.value = this.currentvalue;
}
}
},
//初始化
mounted: function() {
this.updatevalue(this.value);
}
})
(3)index.js
var app = new vue({
el: '#app',
data: {
//数字输入框组件默认值为5(父组件设置初始化值)
value: 5
}
})
总结
以上所述是小编给大家介绍的基于vue开发数字输入框组件,希望对大家有所帮助
希望与广大网友互动??
点此进行留言吧!
value数字 vue_基于Vue开发数字输入框组件相关推荐
- vue 改变domclass_基于 vue 开发甘特图组件的心路历程(兼设计分享)
语雀原文 有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源 公司项目有个甘特图的需求. 笔者考察了世面上 常见的甘特图组件 后,本着 我上我也行 的心态,以及考虑 ...
- 基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
- 基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街 项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
- 2021年基于VUE开发的一套移动端APP小说 听书AI男女多种 支持云端存储书籍记录
2021年基于VUE开发的一套移动端APP小说 前端架构主要采用: "axios": "^0.21.1", "better-scroll": ...
- vue设置输入框输入长度_基于vue的限制输入框可输入字节数的解决方案
2018年07月11日 基于vue的限制输入框可输入字节数的解决方案 需求:input输入框输入上限4个字节.达到上限则不能继续输入,其中1个英文表示1个字节.1个中文表示2个字节. 看到这个需求,第 ...
- 实现一个基于Vue的Button小组件
概述 原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能 例如: 上传图片回显 上传完成 : 预览查看 , 删除等 如果是图片列表,还可能让你拖动图片排序 有的后台项目可能要给图片添加水印,添加标记 有 ...
- npm 编译打包vue_从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 徐小夕:如何从0到1教你搭建前端团队的组件系统zhuanlan.zhihu.com 之后很多朋友希望了 ...
最新文章
- 360浏览器调用selenium
- linux通过tftp下载的文件大小为0,linux 通过 tftp下载文件
- 使用littleTools简化docker/kubectl的命令
- ie8 script445: 对象不支持此操作_经验总结:上海增值税认证勾选安装和操作步骤...
- ASA基本配置实验报告
- 第十九章 7 Data类
- 输入一个数,判断这个数的二进制有几个0,几个1(完整代码)
- 解决Django Rest Framework中的跨域问题
- 学习笔记:聚类算法Kmeans/K-均值算法
- day01 python入门之路
- Flink Batch SQL 1.10 实践
- 线性反馈移位寄存器LFSR verilog实现
- SPPnet论文总结
- PPT动画教程:修改幻灯片母板
- 大型企业开发的ERP系统主要包括几个模块
- ca42a_demo_c++_new_delete表达式
- python最大分词_北大开源了Python中文分词工具包,准确度远超Jieba
- Kafka消费者消费方式
- 为什么 200M 宽带,打王者荣耀还是会有 460 的延迟?
- 高速PCB 设计中终端匹配电阻的放置