vue-autonumeric-directive

vue-autonumeric-directive

example

Introduction

vue-autonumeric-directive是一个基于autoNumeric的Vue插件，使用简单的指令方式，对需要的元素添加格式化功能。

Use Guide

Installation

# with `yarn` :
yarn add vue-autonumeric-directive

# or with `npm` :
npm install vue-autonumeric-directive --save

How to use?

按照Vue插件方式注册插件。

在浏览器中插件的全局名称为VueNumberFormat。

<input name="input1" id="input1" v-model="input1" v-number="config1">

new Vue({
  el: '#demo',

  data: {
    input1: '123.00',
    config1: { bind: 'input1' },
    input2: 32,
  }
})

On which elements can it be used

On which elements can it be used

<input>

只支持下列input类型

• text,
• tel,
• hidden, or
• no type specified at all

支持contenteditable元素

支持其他元素的一次性格式化

支持Vue组件

支持element-ui Input组件

Options

全局Options

export type PluginsOptions = {
  unsafeSet: boolean; // use unsafe method to set value to element and vnode (eval, more powerful)

  pure: boolean;	// 是否不使用分隔符（例如千分位逗号）
  presion: number;	  // 精确到小数点后几位
}

指令Options

declare type InputOptions = {
  unsafeSet: boolean;

  bind: string;
  min: string,
  max: string,
  presion: string,  // 精确到小数点后几位

  local: string,    // autoNumeric本地化配置，
  predifined: string, // autoNumeric预定义配置

  numricOptions: AutoNumericOptions;
};

• local: 参考autoNumeric language options
• predifined: 参考autoNumeric predifined options

指令modifiers

• int // 整数
• pure // 不使用分隔符（例如千分位逗号）
• ppi // pure positive integer 无分隔符正整数

numricOptions选项

参考numberic numricOptions autoNumeric options

Features

1. 保留原事件响应
2. 把AutoNumeric挂在了插件下
3. 把AutoNumeric的实例挂在了对应的element下，方便调用它的方法