el-semver-input

Introduction

基于 el-input 打造的语义化版本输入框

What is el-semver-input

el-semver-input组件基于el-input,在保留了el-input原本的属性以及方法的基础上进行了拓展，对输入值的格式进行校验，并可以自动修正错误输入。

Why

使用el-semver-input，您将享受到以下便捷之处：

• 上手简单，默认开启全部功能
• 可自定义格式检验规则
• 可自定义自动填充规则

Table of Contents

• Feature
• Documentation
• Pre install
• Quick start
• Example
• Props
• Events

Feature

• 可选是否携带 v 前缀
• 阻止不合法字符串输入
• 可根据默认或自定义的规则进行自动填充
• 失去焦点时格式错误重置为默认值
• 自定义检验规则,自动填充规则
• 根据匹配到的规则尝试自动修复

⬆ Back to Top

Documentation

• full api doc
• online demo

⬆ Back to Top

Pre install

# 确保提前安装了element-ui
yarn add element-ui

# 且全局注册了el-input

Quick start

// Step1 安装
yarn add @femessage/el-semver-input

// Step2 在需要的.vue 文件中
<template>
    <el-semver-input v-model="version"></el-semver-input>
</template>

<script>
import ElSemverInput from 'el-semver-input'

export default {
  components: {
    ElSemverInput
  },
  data() {
    return {
      version: ''
    }
  }
}
</script>

⬆ Back to Top

Example

• 自动修复

• 自定义自动填充规则

• 阻止不合法的输入

⬆ Back to Top

Props

参数	说明	类型	默认值
preventIllegal	是否阻止不合法的字符串输入	Boolean	true
autoPadding	是否动根据填充规则进行填充	Boolean	true
prefix	是否需要携带 v 前缀	Boolean	true
validRegular	自定义格式校验规则	Regexp
autoPaddingRegularList	自定义自动填充规则	Array

Events

事件	说明	回调参数
validChange	value 变化时,其值是否符合检验规则	true/false
input	输入框值变化	输入框值

⬆ Back to Top