vue輸入框組件開發(fā)過程詳解

更新時(shí)間：2022年03月01日 13:43:12 作者：GlimmerL

這篇文章主要為大家詳細(xì)介紹了vue輸入框組件開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue輸入框組件開發(fā)過程的具體代碼，供大家參考，具體內(nèi)容如下

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 {
? ? ? ? ? ? ? ? //如果輸入的不是數(shù)字，將輸入的內(nèi)容重置為之前的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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: