@~gson/vue-calculator
Version:
A beautiful and functional Vue calculator component with theme customization and keyboard support
2 lines (1 loc) • 4.71 kB
JavaScript
(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(t=typeof globalThis<"u"?globalThis:t||self,t.VueCalculator=i(t.Vue))})(this,function(t){"use strict";const i=(o,k)=>{const f=o.__vccOpts||o;for(const[a,l]of k)f[a]=l;return f},y={class:"calculator"},g={class:"display-container"},x={class:"expression"},w={key:0,class:"result"},B={class:"buttons"};return i({__name:"App",props:{theme:{type:Object,default:()=>({background:"#f5f7fa",display:"#ffffff",button:"#ffffff",operator:{background:"#a8e6cf",hover:"#88d7b5"},equal:{background:"#ff9ff3",hover:"#f368e0"},clear:{background:"#ff7675",hover:"#d63031"},backspace:{background:"#e0e0e0",hover:"#d0d0d0"}})},confirmText:{type:String,default:"确认"}},emits:["confirm"],setup(o,{emit:k}){t.useCssVars(n=>({"7a787720":o.theme.background,"2097c0c0":o.theme.display,"381b8774":o.theme.button,"221bd7b6":o.theme.operator.background,"7054d1b4":o.theme.operator.hover,"1ffa8c2c":o.theme.equal.background,e9e34200:o.theme.equal.hover,"7be33131":o.theme.clear.background,d617914e:o.theme.clear.hover,"6ad0debf":o.theme.backspace.background,"2a57c90b":o.theme.backspace.hover}));const f=k,a=t.ref("0"),l=t.ref(""),q=t.ref(""),N=t.ref(""),v=t.ref(""),r=t.ref(!1),c=t.ref("");t.onMounted(()=>{window.addEventListener("keydown",C)}),t.onUnmounted(()=>{window.removeEventListener("keydown",C)});const s=n=>{if(r.value&&(a.value="",r.value=!1),n==="."){const e=l.value.split(/[+\-*/()\s]/).pop();if(e&&e.includes("."))return}a.value==="0"&&n!=="."?a.value=n:a.value+=n,l.value+=n,d()},u=n=>{r.value&&(r.value=!1),l.value+=n,d()},p=n=>{r.value&&(a.value="",r.value=!1),l.value+=n,d()},E=n=>{try{return new Function("return "+n)()}catch{return NaN}},d=()=>{if(l.value)try{let n=l.value.replace(/×/g,"*").replace(/÷/g,"/");const e=E(n);isNaN(e)||(c.value=`= ${e}`)}catch{c.value=""}},V=()=>{if(l.value)try{let n=l.value.replace(/×/g,"*").replace(/÷/g,"/");const e=E(n);if(isNaN(e)){alert("无效的表达式");return}if(n.includes("/0")){alert("除数不能为0"),b();return}const m=e.toString();a.value=m,l.value=m,v.value="",N.value="",r.value=!0,c.value=m,f("confirm",m)}catch{alert("计算错误"),b()}},C=n=>{const e=n.key;/[0-9.]/.test(e)?s(e):["+","-","*","/","(",")"].includes(e)?e==="("||e===")"?p(e):u(e):e==="Enter"?V():e==="Backspace"?l.value.length>0&&(l.value=l.value.slice(0,-1),a.value=a.value.slice(0,-1)||"0",d()):e==="Escape"&&b()},R=()=>{l.value.length>0&&(l.value=l.value.slice(0,-1),a.value=a.value.slice(0,-1)||"0",d())},b=()=>{a.value="0",l.value="",q.value="",N.value="",v.value="",c.value="",r.value=!1};return(n,e)=>(t.openBlock(),t.createElementBlock("div",y,[t.createElementVNode("div",g,[t.createElementVNode("div",x,t.toDisplayString(l.value),1),c.value?(t.openBlock(),t.createElementBlock("div",w,t.toDisplayString(c.value),1)):t.createCommentVNode("",!0)]),t.createElementVNode("div",B,[t.createElementVNode("button",{onClick:b,class:"btn clear"},"C"),t.createElementVNode("button",{onClick:e[0]||(e[0]=()=>p("(")),class:"btn operator"},"("),t.createElementVNode("button",{onClick:e[1]||(e[1]=()=>p(")")),class:"btn operator"},")"),t.createElementVNode("button",{onClick:e[2]||(e[2]=()=>u("*")),class:"btn operator"},"×"),t.createElementVNode("button",{onClick:e[3]||(e[3]=()=>s("7")),class:"btn"},"7"),t.createElementVNode("button",{onClick:e[4]||(e[4]=()=>s("8")),class:"btn"},"8"),t.createElementVNode("button",{onClick:e[5]||(e[5]=()=>s("9")),class:"btn"},"9"),t.createElementVNode("button",{onClick:e[6]||(e[6]=()=>u("/")),class:"btn operator"},"/"),t.createElementVNode("button",{onClick:e[7]||(e[7]=()=>s("4")),class:"btn"},"4"),t.createElementVNode("button",{onClick:e[8]||(e[8]=()=>s("5")),class:"btn"},"5"),t.createElementVNode("button",{onClick:e[9]||(e[9]=()=>s("6")),class:"btn"},"6"),t.createElementVNode("button",{onClick:e[10]||(e[10]=()=>u("+")),class:"btn operator"},"+"),t.createElementVNode("button",{onClick:e[11]||(e[11]=()=>s("1")),class:"btn"},"1"),t.createElementVNode("button",{onClick:e[12]||(e[12]=()=>s("2")),class:"btn"},"2"),t.createElementVNode("button",{onClick:e[13]||(e[13]=()=>s("3")),class:"btn"},"3"),t.createElementVNode("button",{onClick:e[14]||(e[14]=()=>u("-")),class:"btn operator"},"-"),t.createElementVNode("button",{onClick:e[15]||(e[15]=()=>s(".")),class:"btn"},"."),t.createElementVNode("button",{onClick:e[16]||(e[16]=()=>s("0")),class:"btn"},"0"),t.createElementVNode("button",{onClick:R,class:"btn operator-top"},"⌫"),t.createElementVNode("button",{onClick:V,class:"btn equal",style:{"grid-column":"span 1"}},t.toDisplayString(o.confirmText),1)])]))}},[["__scopeId","data-v-8dc45829"]])});