1.0.3 • Published 1 year ago

vue-input-calculator-demo v1.0.3

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

vue-input-calculator

Software License Latest Version on NPM npm Vue 3.x

Calculator interface for input field. Touch & Keyboard input. Vue.js component.

Vue 2 < ver. 1.0.0

Vue 3 > ver. 1.0.0

Demo

View demo

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 Usage

<template>
  <div>
      <input type="number" v-model.number="targetValue"/>
      <VueInputCalculator enableKeyboard v-model="targetValue">
        CALC
      </VueInputCalculator>
  </div>
</template>
<script>
  import VueInputCalculator from "vue-input-calculator";
  export default {
    name: 'component.vue',
    components: {VueInputCalculator},
    data() {
      return { targetValue: 0 }
    }
  }
</script>

Setup

Parameters

Props(Parameter)TypeDefaultDescription
v-model (required)String, Number-target input value
auto-applyBooleanfalseauto continue/close on calc result
enable-keyboardBooleanfalseenable keyboard input
persistentBooleanfalsedisable backdrop click to cancel (outside click)
readonly-inputBooleantruecalculator input read only
is-history-logsBooleantrueshow math operations log
z-indexString, Number9999layer calculator z-index position
trigger-wrapper-classString-trigger for open calculator class styles
text-colorString#ffffffcalculator text color
bg-colorString#2f2f31calculator background color
event-buttons-bg-colorString#424345calculator buttons color(c, )
number-buttons-bg-colorString#616163calculator buttons color(0-9.)
action-buttons-bg-colorString#f49e3fcalculator buttons color(+-*=)
action-success-button-bg-colorString#3ff451calculator OK button color

License

The MIT License

Vue CLI configuration

See Configuration Reference.

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago