基于vue开发的,车牌输入专用键盘, vue车牌输入键盘,vue车牌输入 vue-license-keyboard
没办法,在项目中要求车牌输入的键盘要专门使用一个车牌输入的软键盘项目地址:https://github.com/langyuxiansheng/vue-license-keyboard最近重新写了里面的一部分属性,和方法,现在支持pc和移动端了.如果使用遇到了问题或者发现bug请留言.附上截图PC端展示:移动端展示:使用方法看这里npm i ...
·
没办法,在项目中要求车牌输入的键盘要专门使用一个车牌输入的软键盘
项目地址:https://github.com/langyuxiansheng/vue-license-keyboard
最近重新写了里面的一部分属性,和方法,现在支持pc和移动端了.如果使用遇到了问题或者发现bug请留言.
附上截图
PC端展示:
移动端展示:
使用方法看这里
npm i vue-license-keyboard --save
import LicenseKeyboard from 'vue-license-keyboard';
import 'vue-license-keyboard/lib/vue-license-keyboard.css';
Vue.use(LicenseKeyboard);
你可以这样使用:
<el-input
slot="query-4"
v-model.trim="table.queryData.licenseNumber"
placeholder="车牌号"
>
<template slot="prepend">
<LicenseKeyboard v-model="table.queryData.licenseNumber" title="软键盘" />
</template>
</el-input>
直接使用v-model 进行绑定
也可以使用 @confirm="handleInput" 进行回调
methods:{
handleInput(value){
console.log('您输入的车牌为:',value);
}
}
也可以使用
<LicenseKeyboard v-model="table.queryData.licenseNumber" title="软键盘" >
这里是你的自定义图标或者内容
</LicenseKeyboard>
新增的props属性配置
//顶级节点自定义的class
customClass: {
required: false,
type: [String],
default: null
},
//键盘容器节点自定义的class
customLicenseClass: {
required: false,
type: [String],
default: null
},
//键盘背景
keyboardBg:{
required: false,
type: [String],
default: null
},
//键盘字体颜色
fontColor:{
required: false,
type: [String],
default: null
},
//键盘按钮的边框颜色
keyBorderColor:{
required: false,
type: [String],
default: theme
},
//键盘背景
keyBg:{
required: false,
type: [String],
default: null
},
//键盘的透明度
opacity:{
required: false,
type: [Number],
default: 1
},
//默认的字体大小 16px => 1rem
fontSize:{
required: false,
type: [String],
default: '1rem'
},
//键盘的默认圆角
borderRadius:{
required: false,
type: [String],
default: null
},
//是否只在移动端使用 默认false,在pc端使用的时候,建议全部使用手动配置字体大小的方法,区别在于是否会开启字体响应,其中使用了autosize的方法,会改变跟元素的font-size
isMobile:{
required: false,
type: [Boolean],
default: false
}
ps: 如果目前的样式无法满足需求,可以使用自定义的class去覆盖原有的style样式.
更多推荐
已为社区贡献14条内容
所有评论(0)