Vue-number-directive NPM

vue-number-directive

A Vue plug-in to keep the input content as Number string

Install

Node (use as a dependency in packaging system)

# with `yarn`:
yarn add vue-number-directive
# or with `npm`:
npm install vue-number-directive --save

browser

Use the umd.js file in dist/, refer to UMD example

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-number-directive"></script>

<script>
  // The global name of the plugin is `VueNumber`.
  Vue.use(VueNumber)
</script>

Usage

Global plug-in

import Vue from 'vue'
import NumberDirective from 'vue-number-directive'
// If you want to use source code for projects with esm packaging system, import src file
// import NumberDirective from 'vue-number-directive/src/index'

Vue.use(NumberDirective, globalOptions)

Directive only

import Vue from 'vue'
import { NumberDirective } from 'vue-number-directive'

Vue.directive('{{name}}', NumberDirective)
// or use as a local directive
export default {
  directives: {
    number: NumberDirective
  }
}

API

Options

Refer to input example, supported options are shown in Controls

optimizeOptions(
  mergeOptions(
    {
      el,
      vnode,
      debug: config.debug,
      modelPropPath,
      scope: config.scope,

      integer,
      positive,
      fixed: config.fixed,
      flag: config.flag,
      min: config.min,
      max: config.max,
      minimum: config.minimum,
      maximum: config.maximum,
      // exclusiveMinimum,
      // exclusiveMaximum,
      sep: config.sep
    },
    parseSchema(config.schema),
    globalOptions
  )
)