Vue에서 숫자 입력 상자 구성 요소를 구현하는 방법-JS 튜토리얼-php.cn

Vue에서 숫자 입력 상자 구성 요소를 구현하는 방법

亚连

풀어 주다： 2018-06-19 17:23:35

원래의

1959명이 탐색했습니다.

이 글에서는 Vue 기반의 숫자 입력 상자 컴포넌트 개발을 예제 코드를 통해 소개합니다. 필요한 친구들은 참고하면 됩니다.

Vue가 점점 대중화되면서 관련 컴포넌트 라이브러리가 많아지면 어떻게 될까요? 바퀴만 사용하려면 Get up!!!

1. 개요

Vue 컴포넌트 개발을 위한 API: 소품, 이벤트 및 슬롯

2. 주소: https://github.com/MengFangui /VueInputNumber효과:

(1)index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>数字输入框组件</title>
  </head>
  <body>
    <p id="app">
      <!--数字输入框组件命名为：input-number-->
      <!--数字输入框组件默认值为5，最大值为10，最小值为0-->
      <input-number v-model=&#39;value&#39; :max=&#39;10&#39; :min=&#39;0&#39;></input-number>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <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>

로그인 후 복사

(2)input-number.js

//验证输入值是否为数字
function isValueNumber(value) {
  return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + &#39;&#39;);
}
Vue.component(&#39;input-number&#39;, {
  //模板
  template: `
  <p class="input-number">
      <input type="text" :value="currentValue" @change="handleChange" />
    <button @click="handleDown" :disabled="currentValue <= min">-</button>
    <button @click="handleUp" :disabled="currentValue >= max">+</button>
  </p>
  `,
  //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(&#39;input&#39;, val)
    }
    //    ,
    //本示例未使用自定义函数，使用了v-mode input函数来更新value
    //    value: function(val) {
    //      //自定义事件on-change，告知父组件数字输入框值有所改变
    //      this.$emit(&#39;on-change&#39;, 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: &#39;#app&#39;,
  data: {
    //数字输入框组件默认值为5（父组件设置初始化值）
    value: 5
  }
})

로그인 후 복사

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

js에서 파일 로딩 최적화 관련 문제

nodejs+mongodb+vue를 사용하여 ueditor를 구성하는 방법

jQuery를 사용하여 메뉴 추가 및 제거 기능을 구현하는 방법

상세 소개 Webpack의 더욱 실용적인 기능

위 내용은 Vue에서 숫자 입력 상자 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Vue에서 숫자 입력 상자 구성 요소를 구현하는 방법