17 - 计数器

[yshinu]

<script setup lang='ts'>

import {ref, resolveDirective} from "vue";

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

/**
 * Implement the composable function
 * Make sure the function works correctly
 */
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
    let count = ref(initialValue)
    const reset = ()=>{
        count.value = initialValue
    }
    const inc = ()=>{
        if (options.max){
            if (options.max>count.value){
                count.value ++
                return
            }
            return
        }
    }
    const dec = ()=>{
        if (options.min===0||options.min){
            if (options.min<count.value){
                count.value --
                return
            }
            return
        }
    }




    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>