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 数字输入组件的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  7. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  8. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  9. 为什么VUE注册组件命名时不能用大写的？

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

随机推荐

  1. 在eclipse中添加svn插件

    1.点击菜单栏中的help选项,然后选择Install New Software,然后点击ADD,输入: name:subclipse     url:http://subclipse.tigris. ...

  2. exp ORA-01455: converting column overflows integer datatype

    EXP-00008: ORACLE error 1455 encounteredORA-01455: converting column overflows integer datatype add ...

  3. git-window-install及常用命令

    step 1 : msysgit安装 step 2 : 安装完毕后,打开git bash 输入以下命令: git config --global user.name xxx (用户名) git con ...

  4. oracle 数据库插入中文乱码

    一. 查询数据库编码 select userenv('language') from dual; 查询服务器编码 select * from v$nls_parameters; 推出sql查询系统编码 ...

  5. &与&&、|与||的区别

    &和&& 相同之处: &和&&都表示:符号两端必须同时为真,最后的结果才为真:其中一端为假,则最后的结果为假 不同之处: &:左端为假,还需要继 ...

  6. Halo（一）

    @EnableJpaAuditing 审计功能(启动类配置) 在实际的业务系统中,往往需要记录表数据的创建时间.创建人.修改时间.修改人. 每次手动记录这些信息比较繁琐,SpringDataJpa 的 ...

  7. Ververica Platform-阿里巴巴全新Flink企业版揭秘

    摘要:2019云栖大会大数据 & AI专场,阿里巴巴资深技术专家王峰带来“Ververica Platform-阿里巴巴全新Flink企业版揭秘”的演讲.本文主要从Ververica由来开始谈 ...

  8. ubuntu配置px4编译环境

    一.主要参考的内容 px4的开发者手册 https://dev.px4.io/zh/setup/dev_env_linux.html 其中有的shell指令 权限设置 警告:永远不要使用sudo来修复 ...

  9. 前端工程师技能图谱skill-map

    # 前端工程师技能图谱 ## 浏览器 - IE6/7/8/9/10/11 (Trident) - Firefox (Gecko) - Chrome/Chromium (Blink) - Safari ...

  10. strcpy函数学习

    strcpy的功能如下: 原型声明:char *strcpy(char* dest, const char *src); 头文件:#include <string.h> 和 #includ ...