Code Monkey home page Code Monkey logo

mpvue-keyboard's Introduction

mpvue-keyboard 基于 mpvue的小程序虚拟键盘组件

npm package npm downloads

效果图

默认效果1 默认效果2

API

名称 类型 默认值 描述
show Boolean false 是否显示键盘
plateNum String false 实时获取输入的车牌号
province String 京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤川青藏琼宁渝 省份简称键帽内容
natural String 1234567890 0-9自然数键帽内容
base-border String #cccccc 自定义输入格子边框颜色
active-border String #ff7149 自定义正在输入的格子边框颜色
extra-key String 完成 右下角按键内容
inputClass String kb-input__li flex-center 输入内容的展示样式的className,以空格分隔
energyClass String kb-input__new-energy 新能源按钮样式的className
keycapClass String kb-keyboard__td-theme 键帽样式的className
alphClass String kb-keyboard__td-theme 英文字母键帽样式的className
delClass String kb-keyboard__del 删除键帽样式的className
delClass String kb-keyboard__del 删除键帽样式的className
finishedBaseClass String kb-keyboard__finished 完成按钮默认样式的className
finishedClass String kb-keyboard__finished 完成按钮可点击时样式的className

Event

事件名 说明 参数
keyboard 点击完成键时触发 key: 按键所选择的内容

基本使用方法

可运行基础框架查看详细例子https://github.com/omycli/wuc

  • 安装
npm i mpvue-keyboard --save
  • 使用
<template>
    <keyboard :plateNum.sync="plateNum" @keyboard="keyboardChange" :show.sync="show" extraKey="立即支付" active-border="#6f85ff" base-border="#6f85ff"></keyboard>
    <button @click="bandChange">绑定无感支付</button>
</template>

<script>
import Keyboard from 'mpvue-keyboard';
export default {
    components: {
        keyboard: Keyboard
    },
    data() {
        return {
            plateNum: ''
        };
    },
    computed: {},
    methods: {
        keyboardChange(plate) {
            this.plateNum = plate;
        },
        async bandChange() {
            console.log(this.plateNum);
        }
    },
    mounted() {}
};
</script>

mpvue-keyboard's People

Contributors

weiyunpeng avatar

Watchers

James Cloos 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.