ts+vue3实现简易计算器

script

<script setup lang="ts">
import { ref, ComputedRef } from 'vue'
import useComputed from './useComputed'
defineProps<{ msg: string }>()

const a = ref<number | string>(0);
const b = ref<number | string>(0);
const c = ref('');
const d = ref('');
const result = ref<ComputedRef["value"]>(0);

let operationType: number = 0
let times = true;

const { addition, subtraction, multiplication, division } = useComputed(a, b)
const map = new Map([[0, division], [1, multiplication], [2, subtraction], [3, addition]])

const getValue = (e: Event) => {
    const { value } = e.target as HTMLInputElement;
    //有结果
    if (result.value) {
        a.value = result.value
        b.value = 0
    }
    //键入多个小数点
    if (String(a.value).indexOf('.') > 0) {
        console.log(11);

    }

    times ? a.value = a.value + value : b.value = b.value + value
}
const operation = (type: number, Symbol: string) => {
    //验证数据
    if (checkedNumber(a.value)) {
        times = false
        operationType = type
        c.value = Symbol
    }
}
const getResult = (Symbol: string) => {
    //验证a、b的值
    if (a.value && b.value) {
        times = true
        d.value = Symbol
        result.value = map.get(operationType)?.()
    }
}
const reset = () => {
    a.value = 0;
    b.value = 0;
    c.value = ''
    result.value = 0
}

const checkedNumber = (value: any): boolean => {
    let reg = /^-?\d*\.?\d+$/
    return reg.test(value)
}


defineExpose({
    a, b, c, d, result, getValue, operation, getResult, reset
})

</script>

template

<template>
    <div class="show">{{ +a }} {{ c }} {{ +b }} {{ result }}</div>

    <div class="function-key">
        <!-- <input type="button" :value="item" v-for="(item, index) in 12" @click="getValue" /> -->
        <input type="button" value="" />
        <input type="button" value="" />
        <input type="button" value="C" @click="reset" />
        <input type="button" value="/" @click="operation(0, '/')" />
        <input type="button" value="7" @click="getValue" />
        <input type="button" value="8" @click="getValue" />
        <input type="button" value="9" @click="getValue" />
        <input type="button" value="X" @click="operation(1, 'X')" />
        <input type="button" value="4" @click="getValue" />
        <input type="button" value="5" @click="getValue" />
        <input type="button" value="6" @click="getValue" />
        <input type="button" value="-" @click="operation(2, '-')" />
        <input type="button" value="1" @click="getValue" />
        <input type="button" value="2" @click="getValue" />
        <input type="button" value="3" @click="getValue" />
        <input type="button" value="+" @click="operation(3, '+')" />
        <input type="button" value="" @click="getValue" />
        <input type="button" value="0" @click="getValue" />
        <input type="button" value="." @click="getValue" />
        <input type="button" value="=" @click="getResult('=')" />
    </div>
</template>

hooks

import { BigNumber } from "bignumber.js";

export default function useCounter(a: Ref<number>, b: Ref<number>) {
	//加
	const addition = () => {
		return +BigNumber(a.value).plus(b.value);
	};
	//减
	const subtraction = () => {
		return +BigNumber(a.value).minus(b.value);
	};
	//乘
	const multiplication = () => {
		return +BigNumber(a.value).multipliedBy(b.value);
	};
	//除
	const division = () => {
		return +BigNumber(a.value).dividedBy(b.value);
	};

	return {
		addition,
		subtraction,
		multiplication,
		division,
	};
}

style

.function-key {
    display: flex;
    width: 160px;
    flex-wrap: wrap;
}

.function-key input {
    line-height: 1.5715;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: 0 2px #00000004;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    user-select: none;
    touch-action: manipulation;
    height: 32px;
    padding: 4px 15px;
    font-size: 14px;
    border-radius: 2px;
    color: #000000d9;
    background: #fff;
    border-color: #d9d9d9;
    outline: 0;
    width: 40px;
    height: 40px;
}
</style>