脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue输入框组件开发

vue输入框组件开发过程详解

 更新时间：2022年03月01日 13:43:12   作者：GlimmerL  
这篇文章主要为大家详细介绍了vue输入框组件开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue输入框组件开发过程的具体代码，供大家参考，具体内容如下

input-number.js

function isValueNumber(value) {
    return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + '');
}
Vue.component('input-number',{
    template: '\
    <div class=input-number>\
        <input\
            type="text"\
            :value="currentValue"\
            @change="handleChange"\
            @focus="keyControl">\
        <button \
            @click="handleDown" \
            :disabled="currentValue<=min">-</button>\
        <button \
            @click="handleUp" \
            :disabled="currentValue>=max">+</button>\
    </div>',
    data: function (){
        return {
            currentValue: this.value,
            currentStep: this.$parent.step
        }
    },
    watch: {
        currentValue: function (val){
            this.$emit('input',val);
            this.$emit('on-change',val);
        },
        value: function(val){
            this.updateValue(val);
        }
    },
    methods: {
        handleDown: function(){
            if(this.currentValue<=this.min) return;
            this.currentValue-=this.currentStep;
        },
        handleUp: function(){
            if(this.currentValue>=this.max) return;
            this.currentValue+=this.currentStep;
        },
        updateValue: function(val){
            if(val>this.max) val=this.max;
            if(val<this.min) val=this.min;
            this.currentValue=val;
        },
        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;
            }
            
        },
        keyControl: function(){
            var _this=this;
            $(window).keydown(function(e){
                if($('input')){
                    if(e.keyCode==38){
                        _this.handleUp();
                    }
                    else if(e.keyCode==40){
                        _this.handleDown();
                    }
                }
            });
        }
    },
    mounted: function(){
        this.updateValue(this.value);
    },
    props:{
        max:{
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: -Infinity
        },
        value: {
            type:Number,
            default: 0
        },
        step: {
            type:Number,
            default: 1
        }
    }
})

index.js

var app=new Vue({
    el: "#app",
    data: {
        value: 5,
        step: 10
    }
})

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input-number v-model="value" :max="100" :min="0"></input-number>
        </div>
        <script src="js/input-number.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue项目中使用scss详细方法步骤

    vue项目中使用scss详细方法步骤

    这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下
    2023-11-11
  • Vue.js实现分页查询功能

    Vue.js实现分页查询功能

    这篇文章主要为大家详细介绍了Vue.js实现分页查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue嵌套路由与404重定向实现方法分析

    vue嵌套路由与404重定向实现方法分析

    这篇文章主要介绍了vue嵌套路由与404重定向实现方法,结合实例形式分析了vue.js嵌套路由与404重定向的概念、原理、实现步骤与相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • React和Vue实现路由懒加载的示例代码

    React和Vue实现路由懒加载的示例代码

    路由懒加载是一项关键技术,它可以帮助我们提高Web应用的加载速度,本文主要介绍了React和Vue实现路由懒加载的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue router动态路由设置参数可选问题

    vue router动态路由设置参数可选问题

    这篇文章主要介绍了vue-router动态路由设置参数可选，文中给大家提到了vue-router 动态添加 路由的方法,需要的朋友可以参考下
    2019-08-08
  • vue cli3适配所有端方案的实现

    vue cli3适配所有端方案的实现

    这篇文章主要介绍了vue cli3适配所有端方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue组件之间通信方式实例总结【8种方式】

    vue组件之间通信方式实例总结【8种方式】

    这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • 详解无限滚动插件vue-infinite-scroll源码解析

    详解无限滚动插件vue-infinite-scroll源码解析

    这篇文章主要介绍了详解无限滚动插件vue-infinite-scroll源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 详细聊聊vue组件是如何实现组件通讯的

    详细聊聊vue组件是如何实现组件通讯的

    组件间通信简单来说就是组件间进行数据传递,就像我们日常的打电话,就是通讯的一种方式,下面这篇文章主要给大家介绍了关于vue组件是如何实现组件通讯的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue实现锚点跳转及滚动监听的方法

    vue实现锚点跳转及滚动监听的方法

    这篇文章主要为大家详细介绍了vue实现锚点跳转及滚动监听的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论