2.0.2 • Published 6 years ago

ct-adc-pattern-input v2.0.2

Weekly downloads
3
License
-
Repository
-
Last release
6 years ago

ct-adc-pattern-input

基于 Vue2.0,使用正则限制用户输入的 input 组件,支持 v-model

目录

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.

在线 demo

点击: Live Demo.

demo.gif

项目结构

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

参数说明

参数类型默认值是否必填描述
regExpRegExpnull用于 String.prototype.replace(regexp, replacement)
replacementString''用于 String.prototype.replace(regexp, replacement)
valString/Numberv-model 的值

示例

Vue script

setting: {
  regExp: /^[0\D]*|\D*/g, // 匹配不属于正整数的字符
  replacement: '',
  val: '223'
}

Vue template

<pattern-input class="your-class-name"
               :regExp="setting.regExp"
               :replacement="setting.replacement"
               @input="handleInput"
               @change="handleChange"
               v-model.number="setting.val"></pattern-input>

这是一个只能输入正整数的配置,记得使用 v-molde.number,如果你想要得到 Number 类型(maxlength 最大安全值是 15)

想法

I'm not sure is it necessary to emit all the input events. Now I only emit input and change events.

And I think the RegExp settings is not good enough, it's a bit awkward. Maybe I should match what I want instead of replacing what I don't want.

When I want to limit number range, it not convenient. In this condition, maybe create a number-input will be a good solution.

License

Code released under the MIT License.

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago