没办法,在项目中要求车牌输入的键盘要专门使用一个车牌输入的软键盘

项目地址: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样式.