vue +element 数字键盘，vant 数字键盘使用

下载vant 不在赘述  可以看官网  

min.js 写入

import 'vant/lib/index.css';
import { NumberKeyboard } from 'vant';

Vue.use(NumberKeyboard);

下面是页面

<template>
    <div >
    	
<van-number-keyboard
  :show="show"
  extra-key="."
 
  @input="onInput"
  @delete="onDelete"
/>
</div>
    </div>
</template>
<!-- @blur="show = false"-->

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
     show: true
    }
  },
  methods: {
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast('删除');
    }
  }
}
</script>

<style scoped>
/deep/ .van-key {
		height: 100% !important;
	}
	
	/deep/ .van-number-keyboard__body {
		height: 100% !important;
	}
	
	.van-number-keyboard {
		bottom: 0 !important;
		right: 0 !important;
		top: 70px !important;
		left: 50%;
		padding-bottom: 0 !important;
		width: 50% !important;
	}
</style>

因为我的需求是固定在最右边，并且占比50%，直接修改css样式就可以了 ，同时，vant还提供了很多格式

 --------------------------------------------------------------------------------------------------------------------------------------------

因为我的需求是正数，所以，onInput这样写，根据需求自己改

 

onInput(value) {
				//Toast(value);
				if(value == ".") {
					if(this.input.indexOf('.') > 0 || this.input.length == 0) {
						Toast("11");
					} else {
						this.input = this.input.concat(value);
						Toast("22");
					}
				} else if(value == 0) {
					if(this.input.length === 0) {
						this.input = this.input.concat(value + '.');
						Toast("33");
					} else {
						this.input = this.input.concat(value);
					}
				} else {
					this.input = this.input.concat(value);
					Toast("44");
				}
			},