https://github.com/femessage/el-semver-input
🖊Semantic version input component
https://github.com/femessage/el-semver-input
autocomplete input semver
Last synced: about 1 month ago
JSON representation
🖊Semantic version input component
- Host: GitHub
- URL: https://github.com/femessage/el-semver-input
- Owner: FEMessage
- Created: 2019-01-04T07:22:21.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2020-11-11T10:31:12.000Z (over 5 years ago)
- Last Synced: 2025-02-02T18:47:28.846Z (over 1 year ago)
- Topics: autocomplete, input, semver
- Language: Vue
- Homepage: https://femessage.github.io/el-semver-input/
- Size: 6.02 MB
- Stars: 8
- Watchers: 2
- Forks: 8
- Open Issues: 20
-
Metadata Files:
- Readme: README-zh.md
Awesome Lists containing this project
README
# el-semver-input
[](https://travis-ci.com/FEMessage/el-semver-input)
[](https://www.npmjs.com/package/@femessage/el-semver-input)
[](https://www.npmjs.com/package/@femessage/el-semver-input)
[](https://github.com/FEMessage/el-semver-input/blob/master/LICENSE)
[](https://github.com/FEMessage/el-semver-input/pulls)
[](https://github-tools.github.io/github-release-notes/)
语义化版本输入框：失去焦点可以补全。
[](https://cdn.nlark.com/yuque/0/2019/gif/224563/1561953196140-1fec3064-560c-4001-9f88-366be556cab8.gif#align=left&display=inline&height=87&originHeight=87&originWidth=1131&size=0&status=done&width=1131)
## Introduction
**What is `el-semver-input`**
`el-semver-input`组件基于`el-input`,在保留了`el-input`原本的属性以及方法的基础上进行了拓展，对输入值的格式进行校验，并可以自动修正错误输入。
**Why**
使用`el-semver-input`，您将享受到以下便捷之处：
* 上手简单，默认开启全部功能
* 可自定义格式检验规则
* 可自定义自动填充规则
## Table of Contents
* [Introduction](#introduction)
* [Feature](#feature)
* [Documentation](#documentation)
* [Pre Install](#pre-install)
* [Quick Start](#quick-start)
* [Example](#example)
* [Contributors](#contributors)
## Feature
* 可选是否携带 v 前缀
* 阻止不合法字符串输入
* 可根据默认或自定义的规则进行自动填充
* 失去焦点时格式错误重置为默认值
* 自定义检验规则,自动填充规则
* 根据匹配到的规则尝试自动修复
**[⬆ Back to Top](#table-of-contents)**
## Documentation
* [doc and online demo](https://femessage.github.io/el-semver-input/)
**[⬆ Back to Top](#table-of-contents)**
## Pre Install
```sh
# 确保提前安装了element-ui
yarn add element-ui
# 且全局注册了el-input
```
## Quick Start
```sh
# Step1 安装
yarn add @femessage/el-semver-input
```
```vue
// Step2 在需要的.vue 文件中
import ElSemverInput from 'el-semver-input'
export default {
components: {
ElSemverInput
},
data() {
return {
version: ''
}
}
}
```
**[⬆ Back to Top](#table-of-contents)**
## Example
* 自动修复
* 自定义自动填充规则
* 阻止不合法的输入
**[⬆ Back to Top](#table-of-contents)**
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
**[⬆ Back to Top](#table-of-contents)**