vue-input-calculator

vue-input-calculator

Calculator input component. Mobile friendly.

Demo

View demo.

Install

yarn add vue-input-calculator

Or

npm install --save vue-input-calculator

Add to project

Global

// main.js
import VueInputCalculator from "vue-input-calculator";
Vue.component('vue-input-calculator', VueInputCalculator);

Local

// component.vue
import VueInputCalculator from "vue-input-calculator";
export default {
    components: {VueInputCalculator}
    ...
  }

Usage

<VueInputCalculator v-model="targetVariable">Calc</VueInputCalculator>

Setup

Parameters

Props(Parameter)	Type	Default	Description
v-model (required)	String, Number	-	target input value
auto-apply	Boolean	false	auto continue/close on calc result
persistent	Boolean	false	disable backdrop click to cancel (outside click)
readonly-input	Boolean	true	calculator input read only
is-history-logs	Boolean	true	show math operations log
trigger-class	String	-	trigger for open styling class
text-color	String	#ffffff	calculator text color
bg-color	String	#2f2f31	calculator background color
event-buttons-bg-color	String	#424345	calculator buttons color(c, ›, ±)
number-buttons-bg-color	String	#616163	calculator buttons color(0-9.)
action-buttons-bg-color	String	#f49e3f	calculator buttons color(+-*=)
action-success-button-bg-color	String	#3ff451	calculator OK button color

License

The MIT License

Vue CLI configuration

See Configuration Reference.