17 - 计数器

[Gilfoyle-sy]

min and max is option params

<script setup lang="ts">
import { ref } from 'vue'

interface UseCounterOptions {
  min?: number
  max?: number
}

/**
 * Implement the composable function
 * Make sure the function works correctly
 */
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
  const count = ref<number>(initialValue)

  const inc = () => {
    if (options.max === undefined || count.value < options.max) {
      count.value++
    }
  }

  const dec = () => {
    if (options.min === undefined || count.value > options.min) {
      count.value--
    }
  }

  const reset = () => {
    count.value = initialValue
  }

  return {
    count,
    inc,
    dec,
    reset,
  }
}

const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="inc">inc</button>
  <button @click="dec">dec</button>
  <button @click="reset">reset</button>
</template>