vue-number-directive

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

English Doc|中文文档

examples & docs

[TOC]

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
  )
)

Directive modifiers

int

Whether is a integer

pos

Whether is a positive number

Features

supported element

<input>

only supports the following input types：

• text,
• tel,
• password
• search
• hidden, or
• no type specified at al

<textarea>

contenteditable element

Element with a true contenteditable attribute

Vue component

Vue component that contain the above elements

• such as ElementUI’s Input and NumberInput

Maintainers

@Awam M Wang

Contributing

See the CONTRIBUTING file

PRs accepted.

ChangeLog

see the CHANGELOG file

License

MIT © 2020 Awam M Wang