vue 数字输入组件
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字输入组件</title>
</head>
<body>
<div id="app">
<input-number v-model="value" :max="10" :min="0"><input-number>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="input-number.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el: '#app',
data: {
value: 5
}
})
input-number.js
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
}
Vue.component('input-number', {
template:'\
<div class="input-number">\
<input\
type="text"\
:value="currentValue"\
@change="handleChange">\
<button\
@click="handleDown"\
:disabled="currentValue <= min">-</button>\
<button\
@click="handleUp"\
:disabled="currentValue >= max">+</button>\
</div>',
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
data: function() {
return {
currentValue: this.value
}
},
watch: {
currentValue: function(val) {
this.$emit('input', val);
this.$emit('on-change', val);
},
value: function(val) {
this.updateValue(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.currentValue = max;
}else {
console.log(event);
event.target.value = this.currentValue;
}
}
}
},
mounted: function() {
this.updateValue(this.value);
}
})
vue 数字输入组件的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的？
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
随机推荐
- awk 起始位置和长度和 mf 一致
1位开始 , 925开始 截取24 awk '{OFS="";print(substr($0,925,24),substr($0,1,24),substr($0,436,1),&q ...
- memcache、mongodb、redis的对比区别
>>Memcached Memcached的优点:Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境 ...
- RFCN理解，不完整待补全
RFCN的核心是通过修改roi pooling的位置,来增加共享参数的层,减少运算时间: roi pooling位置的影响如下: 越靠近 Input - 对应 ROI-Wise 检测子网越深,准确度也 ...
- php操作redis--生存时间篇
常用函数:expireAt,expire,ttl 应用场景:登陆生效时间,验证码有效时间等 设置某个键的有效时间,如当天有效(以时间戳的方式设置) $expireTime = mktime('23', ...
- HTTP 错误 500.21 - Internal Server Error处理程序“NickLeeCallbackHandler”在其模块列表中有一个错误模块“ManagedPipelineHandler”
HTTP 错误 500.21 - Internal Server Error处理程序“NickLeeCallbackHandler”在其模块列表中有一个错误模块“ManagedPipelineHand ...
- UNP学习第五章
一.概述 想要写一个完整的TCP客户-服务器程序例子,有下面功能的回射服务器 1.客户从标准输入读一行文本,写到服务器上: 2.服务器从网络输入读此行,并回射给客户: 3.客户读此回射行并写到标准输出 ...
- null-ouc 小组冲刺阶段博客目录
null-ouc Beta冲刺阶段博客目录 github:https://github.com/orgs/OUC-null/people 一.Scrum Meeting 1. [第十周会议记录](h ...
- windows 下redis在后台运行
打开命令终端,cd进入redis目录 安装redis服务:redis-server --service-install redis.windows.conf --loglevel verbose re ...
- CDN技术详解(七)
动态内容加速服务的实现 随着Web2.0的兴起,产生了动态网页.个性化内容.电子交易数据等内容的加速,这些就涉及了动态内容加速技术. 静态内容的加速,都是对于表现层的加速,对于动态页面等内容的加速,则 ...
- AcWing 209. 装备购买 （高斯消元线性空间）打卡
脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量z[i]=(ai,1,ai,2,..,ai,m)z[i]=(ai,1,ai,2,..,ai,m) 表示,每个装备需要 ...