Vue數(shù)字輸入框組件示例代碼詳解

數(shù)字輸入框組件

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)運城免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

實現(xiàn)功能：只允許輸入數(shù)字(包括小數(shù))、允許設(shè)置初始值、最大值、最小值。

為了方便，這里選用Vue的 cli-service

實現(xiàn)快速原型開發(fā)

首先template部分代碼

<template>
 <div class="demo">
  <input-number v-model="value" :max="10" :min="0"></input-number>
 </div>
</template>

這部分沒有什么特別說明的，分別傳入 value、max、min 作為子組件的原始值最大值和最小值。在子組件中用 props 接收，獨立組件，對每個傳入的prop進行類型驗證

主要JS部分代碼

<script>
import Vue from 'vue'
Vue.component('input-number',{
 props: {
  value: {
   type: Number,
   default: 0
  },
  max: {
   type: Number,
   default: Infinity
  },
  min: {
   type: Number,
   default: -Infinity
  }
 },
 data() {
  return {
   currentValue: this.value
  }
 },
 render(cr) {
  let _this = this
  ...
 }
})
export default {
 data() {
  return {
   value: 5
  }
 }
}
</script>

在這里不能使用字符串的方式定義組件模板，所以使用 render() 函數(shù)的方式

render(cr) {
 let _this = this
 return cr('div',{'class': 'input-number'},[
  cr('button',{'class': {'down-btn':true,'dis':this.currentValue<=this.min},on: {click: _this.handleDown},},['-']),
  cr('input',{'class': 'change-input',domProps: {value: _this.currentValue}, on: {change: _this.handleChange}}),
  cr('button',{'class': {'down-btn':true,'dis':this.currentValue>=this.max},on: {click: _this.handleUp},},['+']),
 ])
}

定義 watch 和 methods

watch: {
 value(val) {
  this.updateValue(val)
 },
 currentValue(val) {
  this.$emit('input', val)
  this.$emit('on-change', val)
 }
},
methods: {
 updateValue(val) {
  if(val > this.max) val = this.max
  if(val < this.min) val = this.min
  this.currentValue = val
 },
 handleDown() {
  if(this.currentValue<=this.min) return
  this.currentValue-=1
 },
 handleUp() {
  if(this.currentValue>=this.max) return
  this.currentValue+=1
 },
 handleChange(ev) {
  let val = ev.target.value.trim()
  let max = this.max
  let min = this.min
  if(this.isValueNumber(val)) {
   val = Number(val)
   this.currentValue = val
   if(val > max) {
    this.currentValue = max
   } else if(val < min) {
    this.currentValue = min
   }
  }else {
   ev.target.value = this.currentValue
  }
 },
 isValueNumber(val) {
  return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(val+'')
 }
}

最后是Less部分代碼

<style lang="less">
* {
 box-sizing: border-box;
}
.demo {
 width: 200px;
 margin: 0 auto;
}
.input-number {
 width: 100%;
 display: flex;
 height: 40px;
 align-items: center;
 justify-content: space-between;
 .down-btn,.up-btn {
  font-size: 18px;
  width: 40px;
  height: 40px;
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  outline: none;
  &.up-btn {
   border-radius: 0 4px 4px 0;
  }
  &.dis {
   cursor: not-allowed;
  }
 }
 .change-input {
  flex: 1;
  max-width: 100px;
  outline: none;
  border: none;
  text-align: center;
  height: 40px;
 }
}
</style>

總結(jié)

以上所述是小編給大家介紹的Vue數(shù)字輸入框組件示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

新聞標題：Vue數(shù)字輸入框組件示例代碼詳解
分享網(wǎng)址：http://www.chinadenli.net/article2/ishpoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、App設(shè)計、微信公眾號、電子商務(wù)、Google、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue數(shù)字輸入框組件示例代碼詳解