@diidoolab/penny v0.1.1

Penny

A Vue2 plugin for currency input based on Cleave.js

Why?

To manage price input, we used to defined type='number' or restrict input event, native input is allow to enter e, -, . and numbers in any orders, that's why I love Cleave.js here, but in Vue project, most of plugins are provide SFC wrapped with Cleave.js, which is not easy to use with other vue UI framework like Element or Vuetify, so I'm trying to build a directive plugin to achieve currency restrict, if there's any suggestion, please let me know.

Installation

npm

npm install @diidoolab/penny

yarn

yarn add @diidoolab/penny

then

import Penny from 'penny'

Vue.use(Penny)

How to use

<template>
  <input v-model="price" v-penny />
</template>

<script>
export default {
  data: () => ({
    price: 0
  })
}
</script>

by default, Penny will reserve 9 integer digits and 2 float digits

e.g. 123456789.12

and there's 3 modifiers for use

clear

will clear input on focus if value is 0

<input v-model="price" v-penny.clear />

integer

allow integer only

<input v-model="price" v-penny.clear />

positive

allow positive only

<input v-model="price" v-penny.positive />

also accept 2 options

maxInteger

define integer digits

<input v-model="price" v-penny="{ maxInteger: 10 }" />

maxFloat

define float digits

<input v-model="price" v-penny="{ maxFloat: 4 }" />