17 - 计数器

[zsn688]

// 你的答案
<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(initialValue)
  const inc = () => {
     if('max' in options)  return count.value < options.max ? count.value = count.value+1 : count.value
  count.value = count.value+1
  }
  const dec = () => {
  if('min' in options)  return count.value > options.min ? count.value = count.value-1 : count.value
  count.value = count.value-1
  } 
  const reset = () => {
  count.value = initialValue
  }
  return { count, inc, dec, reset }
}

const { count, inc, dec, reset } = useCounter(4,{min:8})

</script>

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