Cd-adc-pattern-input NPM

cd-adc-pattern-input

A Vue2.0 Component used RegExp to limit the user's input, and works like native input element.

Demo build setup

# install dependencies
npm install
or
cnpm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Live demo

Just click there: Live Demo.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

cd-adc-pattern-input/
├── ...
├── src/
│   ├── /component
│   │   └── pattern-input.vue
│   └── /js
│      └── ... demo ...
└── /view
    └── demo.html

Quick start

Parameter declaration

/**
 * Component Settings
 * @param  {String} pattern     Using for: RegExp(pattern[, flags])
 * @param  {String} flags       Using for: RegExp(pattern[, flags])
 * @param  {String} replacement Using for: String.prototype.replace(regexp, replacement)
 * @param  {String\Number} val  For v-model
 * @return {String}             
 */

Vue script

setting: {
  pattern: '^[0\\D]*|\\D*', // Match string that doen't belong to the positive integer
  flags: 'g',
  replacement: '',
  val: '223'
}

Vue template

<div id="app">
	<pattern-input placeholder="只能输入正整数" maxlength="10" class="your-class-name"
	               :pattern="setting.pattern"
	               :flags="setting.flags"
	               :replacement="setting.replacement"
	               v-model="setting.val"></pattern-input>
</div>