in

Easy formatted numbers, currency and percentage with input/directive mask for Vue.js


Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

Features

  • Lightweight < 2kb
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

Usage

A. Globally

import Vue from 'vue'
import number from 'vue-number-format'

// register directive v-number and component <number>
Vue.use(number, {precision: 4})

B. Use as component

<template>
  <div>
    <number v-model="price" v-bind="number"></number> {{price}}
  </div>
</template>

<script>
  import { Number } from 'vue-number-format'

  export default {
    components: {
      Number
    },

    data () {
      return {
        price: 123.45,
        number: {
          decimal: '.',
          separator: ',',
          prefix: '$ ',
          suffix: ' #',
          precision: 2,
          masked: false
        }
      }
    }
  }
</script>

C. Use as directive

Must use vmodel.lazy to bind works properly.

<template>
  <div>
    <input v-model.lazy="price" v-number="number" /> {{price}}
  </div>
</template>

<script>
  import { VNumber } from 'vue-number-format'

  export default {
    data () {
      return {
        price: 123.45,
        number: {
          decimal: '.',
          separator: ',',
          prefix: '$ ',
          suffix: ' #',
          precision: 2,
          masked: false /* doesn't work with directive */
        }
      }
    },

    directives: {
      number: VNumber
    }
  }
</script>

Properties

property Required Type Default Description
precision false Number 2 How many decimal places
decimal false String “.” Decimal separator
separator false String “,” Thousands separator
prefix false String “” Currency symbol followed by a Space, like “$ “
suffix false String “” Percentage for example: ” %”
masked false Boolean false If the component output should include the mask or not




Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

MoviesApp based on themoviedb API With Flutter

Create tailwind css react components like styled components with classes name on multiple lines