uni-app 项目（关于自定义数字键盘组件）

业务需求：金额，数字可以进行修改，自定义数字键盘组件，输入数字的同时可以显示正在修改的项目以及输入的数字大小
本质上还是组件的封装，以及组件间传值

页面：

封装组件：component/kx-numberKey/kx-numberKey.vue

UI部分：

<template>
	<view name='kxNumKey'>
	<--本质还是引入Uni-popup组件-->
		<uni-popup ref="popup" type="bottom">
			<view class="kxbottom">
				<block v-if="!kxbut">
				<--第一部分“取消，确认”部分-->
					<view class="kxbut">
						<text @click="close">取消</text>
						<text @click="ok">确定</text>
					</view>
					<--第二部：显示修改的项目和数字-->
					<view class="kxinput">
						<text>{{textS}}</text>
						<text v-if="data">{{data}}</text>
						<text class="default" v-else>{{placeholder||def}}</text>
						<text>{{textE}}</text>
					</view>
				</block>
				<--第三部分：数字按钮部分，包含“后退”和小数点-->
				<view class="kxnumcon">
					<view class="kxbutitem" v-for="(item,index) in numberData" :key='index'>
						<--后退按钮-->
						<block v-if="index==numberData.length-1">
							<button 
							class="kxitemconwarn" 
							hover-class='kxitemhover'
							@click="del">
							{{item}}
							</button>
						</block>
						<--其他按钮-->
						<block v-else>
							<button 
							class="kxitemcon" 
							hover-class='kxitemhover' 
							@click="add(item)">
							{{item}}
							</button>
						</block>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

逻辑部分

<script>
//引入uni-popup组件
	import uniPopup from '../uni-popup/uni-popup.vue'
	export default {
		name: 'KXNumKey',
		components: {
			uniPopup
		},
		props: {                //父传子的数据存放处
			kxdata: '',         //数字
			placeholder: '',  
			textS: '',         //项目名称
			textE: '',         //单位（可有可无）
			kxbut: true,       //是否显示“取消，确认”按钮
			kxtext:true
		},
		data() {
			return {
				numberData: [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '✖'],
				data: '',    
				def: '请输入'
			};
		},
		methods: {
		    //打开数字键盘
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.data = '';
				this.$refs.popup.close()
			},
			add(e) {
				if(e == '.' && this.data.indexOf('.') != -1){
					return;
				}
				
				this.data += e
				//判断是否需要点击按钮
				if (this.kxbut) {
					this.$emit("rundata", this.data)
				}
			},
			del() {
				this.data = String(this.data).substring(0, String(this.data).length - 1)
				//判断是否需要点击按钮
				if (this.kxbut) {
					this.$emit("rundata", this.data)
				}
			},
			//返回数据
			ok() {
				this.$emit("rundata", Number(this.data))
				this.data = '';
				this.$refs.popup.close()
			}
		},
		watch: {
			kxdata(e) {
				this.data = e
			}
		}
	}
</script>

应用页面

<view " @click="showKX(item,index)">
<kxNumKey 
   ref='kxNum'  
   @rundata='kxNumData' 
   @excess='kxNumExcess'
   :kxdata=' kxNumKey.data' 
   :textS=' kxNumKey.textS'
   :textE=' kxNumKey.textE' 
   :kxtext='true'>
</kxNumKey>

页面的逻辑部分

import kxNumKey from '@/components/kx-numKey/kx-numKey.vue'
export default{
  data:{
  return{
  kxNumKeyData:{
		data: 0.00, // 数字控件的值
		kxbut: true,
		textS: '金额',
		textE: '%',
			},
		}
  },
  methods:{
  showKX(item,index){
  this.kxNumKeyData = {
		data: String(item.qty), //数量
		textS: item.itemName,   //物品的名字
		textE: item.unitName,   //物品的单位类型
		index: index,          //物品的索引
			}
			//打开数量栏计算部分
		this.$refs.kxNum.open();
  },
  //选择数量部分（子传父，父接收数据）
kxNumData(num) {
			console.log(num)  //选择的数字
			if(num){
			//将得到的数字赋值给需要的数组中index的某个属性值
				this.detailList[this.kxNumKeyData.index].qty = Number(num); 
				this.detailList[this.kxNumKeyData.index].amt = num * this.detailList[this.kxNumKeyData.index].price;
			}
		},
//选择数字失败（数字太大不符合规格）
	kxNumExcess() {
			let _this = this;
			uni.showToast({
				title: '数量不符合规格',
				icon: 'none',
			})
		},
  }

}