Giter VIP home page Giter VIP logo

vue3-license-plate's Introduction

vue3-license-plate

介绍

  • vue3-license-plate是一款基于vue3的车牌号输入控件。

vue2版本

vue-license-plate

微信小程序版本

mp-license-plate

项目中使用

  • 下载
npm install vue3-license-plate
  • 在main.js中加入
import LicensePlate from 'vue3-license-plate'
import 'vue3-license-plate/lib/licensePlate.css'

createApp(App).use(LicensePlate).mount('#app')
  • 在需要的页面中使用
licensePlate: "川A00001"

<LicensePlate v-model="licensePlate" @change="change"></LicensePlate>

change(val){
	console.log(val.array)	//数组形式
	console.log(val.value)	//字符串形式
	console.log(val.pass)	  //是否验证通过
}
  • 自定义车牌展示
<LicensePlate :borderRadius="6"
							@change="changeVal"
							v-model="licensePlate"
							:autoShow="false">
						<div class="custom">{{ licensePlate }}</div>
</LicensePlate>
//自定义时 borderColor borderActiveColor borderWidth borderRadius  fontColor fontSize 无效
//自定义时点击事件根据当前长度计算,即默认选中最后一位
  • 展示如下

API

Props

名字 类型 默认值 说明
v-model String "" 默认车牌号
autoShow Boolean false 自动展示键盘
borderColor String #79aef3 输入框边框颜色
borderActiveColor String #330aec 输入框选中的边框颜色
borderWidth Number 1 边框宽度
borderRadius Number 6 边框圆角
fontColor String #333333 文字颜色
fontSize Number 16 文字大小

Events

名字 说明 回调参数
@change 输入改变时触发 {array:[],value:string,pass:false}

Change Log

  • 1.0.2

1、增加 '警'、'挂' 2、支持车牌slot

  • 1.0.1

自动展示键盘

  • 1.0.0

首次发版

License

MIT

vue3-license-plate's People

Contributors

leiyun1993 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.