README.zh_CN.md

vue-number-directive

一个 Vue 插件，用来让输入内容保持为符合要求的数字

English Doc|中文文档

examples & docs

[TOC]

Install

Node(作为依赖引入打包系统)

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

浏览器中

使用dist目录中的umd.js包，参考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>
  // 在浏览器中插件的全局名称为`VueNumber`。
  Vue.use(VueNumber)
</script>

Usage

全局插件方式

import Vue from 'vue'
import NumberDirective from 'vue-number-directive'
// 如果想用未打包的src，适合项目有esm打包能力时
// import NumberDirective from 'vue-number-directive/src/index'

Vue.use(NumberDirective, globalOptions)

指令方式

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

Vue.directive('{{name}}', NumberDirective)
// 或者局部指令方式
export default {
  directives: {
    number: NumberDirective
  }
}

API

Options

参考input example，Controls中展示了支持的options

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

指令 modifiers

int

是否整数

pos

是否正数

Features

支持的元素

<input>

只支持下列 input 类型：

• text,
• tel,
• password
• search
• hidden, or
• 不指定类型

<textarea>

contenteditable 的元素

contenteditable属性为真值的元素

Vue 组件

包含上述元素的 Vue 组件

• 例如 Element 的 Input 和 NumberInput

Maintainers

@Awam M Wang

Contributing

See the CONTRIBUTING file

PRs accepted.

ChangeLog

see the CHANGELOG file

License

MIT © 2020 Awam M Wang