Vue InputNumber 计数器

父组件：

<template>

  <InputNumber :InputNumberData="InputNumber" :max="10" :min="0"></InputNumber>

</template>

 

import InputNumber from '@/components/InputNumber'

export default {

  data () {

    return {

      InputNumber: 1

    }

  },

  components: {

    InputNumber

  }

}

</script>

 

<style scoped>

</style>

子组件：

<template>

  <div>

    <input type="button" value="-" :disabled="number <= min" @click="number--">

    <input type="text" v-model.number="number" @blur="outInput">

    <input type="button" value="+" :disabled="number >= max" @click="number++">

  </div>

</template>

 

<script>

export default {

  props: [ 'InputNumberData', 'max', 'min' ],

  data () {

    return {

      number: this.InputNumberData

    }

  },

  methods: {

    outInput () {

      if (this.number > this.max) this.number = this.max

      if (this.number < this.min) this.number = this.min

    }

  }

}

</script>

 

<style scoped>

input{height:30px;padding:0 10px;}

</style>

有用  |  无用 取消

猜你喜欢