vue,uni-app密码支付键盘

**在components建一个组件文件**
<template>
	<div class="keyborad" :style="{transform:show_key?'translateY(0)':'translateY(100%)'}">
		<div class="key_main">
			<div class="main_title">

				<span class="cuIcon-close span-reding" @click="cacelFun"></span>
				<span>请输入支付密码</span>
			</div>
			<div class="main_content">
				<div class="content_num">
					<div v-for="item in inputArray" :key="item" class="content_item">{
    
    {
    
    password[item-1] ? '●' :''}}</div>
				</div>
				<!-- <div class="main_forget" @tap="forgetFun">忘记密码</div> -->
			</div>
			<div class="main_keyboard">
				<div class="key_num" v-for="item in numberArray" :key="item" @click="inputNumFun({num:item})">{
    
    {
    
    item}}</div>
				<div class="key_null" @click="hideFun">确定</div>
				<div class="key_0"  @click="inputNumFun({num:0})">0</div>
				<div class="key_del" @click="delNumFun">
					删除
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
    
    
		props:{
    
    
			show_key:Boolean
		},
		computed:{
    
    },
		data(){
    
    
			return{
    
    
				inputArray:[1,2,3,4,5,6],//输入密码的长度
				numberArray:[1,2,3,4,5,6,7,8,9],//密码键盘的数字
				password:'',//密码
			}
		},
		methods:{
    
    
			inputNumFun(op){
    
    
				let _this = this
				if(_this.password.length <=6){
    
    
					_this.password += op.num
					if(_this.password.length == 6){
    
    
						_this.$emit('getPassword',{
    
    password:_this.password})
					}
				}

			},
			delNumFun(){
    
    
				if(this.password.length == 0) return
				this.password = this.password.substring(0,this.password.length - 1)
				console.log("删除后的结果",this.password)
			},
			forgetFun(){
    
    
				uni.showToast({
    
    
					title:'忘记密码操作',
					icon:'none'
				})
			},
			hideFun(){
    
    
				console.log("close")
				this.$emit('hideFun')
				this.password = ""
			},
			cacelFun(){
    
    
				this.$emit('cacelFun')
				this.password = ""
			}
		}
	}
</script>

<style lang="scss">
	.keyborad{
    
    width:100vw;height: 100vh;background: rgba(0, 0, 0, 0.6);opacity: 1;z-index: 9999999;position: fixed;bottom: 0px;top:0px;left:0px;right:0px;z-index:100;display: flex;flex-direction: column;justify-content: flex-end;transform: translateY(100%);transition:all 0.4s;
		.key_main{
    
     width:100vw;height:415px;background:#f1f1f1;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;
			.main_title{
    
     font-size:34px;color: #000000;height: 100px;position: relative;  display: flex;align-items: center;letter-spacing: 2px;width:100%;box-sizing: border-box;padding:0px 20px;border-bottom:2px solid #e1e1e1;
				// .span-reding{ width:48px;height: 48px;position: relative;z-index:10}
				.span-reding{
    
    position: absolute;left:90px;color:red}
				span{
    
     flex:1;margin-left:-48px;display: flex;justify-content: center;}
			}
			.main_content{
    
     width:100%;box-sizing: border-box;padding:10px 30px;
				.content_num{
    
     width:100%;height: 100px;border:2px solid #DBDBDB;border-radius: 10px;display: flex;align-items: center;
					.content_item{
    
     flex: 1;height: 100%;border-right: 2px solid #DBDBDB;display: flex;justify-content: center;align-items: center;}
					.content_item:last-child{
    
     border-right:none}
				}
				.main_forget{
    
     display: flex;justify-content: center;align-items: center;width:100%;font-size:28px;color: #007AFF;margin-top:40px}
			}
			.main_keyboard{
    
     width:100%;height: 270px;background: #FFFFFF;display: flex;flex-flow: wrap;
				.key_null,.key_del{
    
     background: #e2e7eb;}
				image{
    
     width:48px;height: 48px;}
				.key_num,.key_null,.key_del,.key_0{
    
     width: 125px;
    height:60px;display: flex;align-items: center;justify-content: center;}
				.key_num{
    
     border-right:2px solid #f1f4f4;border-bottom:2px solid #f1f4f4;box-sizing: border-box;}
				.key_num:nth-child(8){
    
    border-bottom: none;}
				.key_0{
    
     border-top:2px solid #f1f4f4}
			}
		}
	}
</style>

**调用组件使用**
<template>
  <div>
    <div>
      <button class="cu-btn bg-green margin-left" @click="hideModal">确定支付</button>
    </div>
    <pay-keyboard :show_key="show_key" @hideFun="hideFun" @cacelFun="cacelFun" @getPassword="getPassword"></pay-keyboard>
  </div>
</template>
<script>
  import payKeyboard from '../components/keyjian.vue'
  export default{
    
    
    components:{
    
    
      payKeyboard
    },
    data(){
    
    
      return{
    
    
        show_key:false,
        pwd: '',
      }
    },
    methods:{
    
    
      // 输入密码支付
      hideFun() {
    
    
      	this.show_key = false

      },
      // 取消支付框
      cacelFun(){
    
    
      	this.show_key = false
      },
      getPassword(n) {
    
    

      	this.pwd = n.password
         alert('密码:'+this.pwd)
      },
      hideModal() {
    
    
      	this.show_key = true
      },
    }
  }
</script>
<style>

</style>
注意：未作手机适配！