vue-input-calculator

Calculator input component. Mobile friendly.
1,800 11
Install
npm install vue-input-calculator
Latest Version:1.0.1
Vue:3
Older releases:2
License:MIT
Last Updated:May 13, 2023
Links: GitHub  ·  npm
Maintainer: lih1989

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) Type Default Description
v-model (required) String, Number - target input value
auto-apply Boolean false auto continue/close on calc result
enable-keyboard Boolean false enable keyboard input
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
z-index String, Number 9999 layer calculator z-index position
place in-place|modal modal in-place puts interface in its DOM position, modal or other displays on click input.
trigger-wrapper-class String - trigger for open calculator class styles
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.

Related Packages

fundebug-vue

使用Fundebug实时监控Vue.js应用BUG

15,752
nuxt-custom-headers

Nuxt module to add custom headers to SSR rendered pages.

13,356 12
vue-restify

rest API requests

1,112 0
vue-imask

Vue input mask

1,807,737 5,181

Version History

Version Released Vue License
1.0.1 ^3.2 MIT
1.0.0 ^3.2 MIT
0.4.1 ^2.6.11 MIT
0.4.0 ^2.6.11 MIT
0.3.9 ^2.6.11 MIT