四、封装u-action组件

• 新增新增按钮，弹出键盘和输入框
• 输入框的onKeyboardheightchange时间的ecent.detail.height有bug，属于官方问题

一、u-action代码

<template>
	<view v-if="panelVisiable==false" class="plus-btn position-fixed rounded-circle flex justify-center align-center" @click="panelVisiable=true">
		<u-icon size="60rpx" :code="'\ue727'"></u-icon>
	</view>
	<view class="panel position-fixed bottom-0 p-2" :style="{bottom:panelBottom+'px'}" v-else>
		<input type="text" placeholder="添加任务" :adjust-position="false"
		 @keyboardheightchange="onKeyboardheightchange" @confirm="onConfirm" :focus="panelFocus"/>
	</view>
</template>

<script>
	export default {
		name:"u-action",
		emits:["output"],
		data() {
			return {
				panelVisiable:false,
				panelBottom:0,
				panelFocus:false
			};
		},
		watch:{
			panelVisable(newval:boolean){
				this.panelFocus=newval
			}
		},
		methods:{
			onKeyboardheightchange(e : InputKeyboardHeightChangeEvent){
				if(e.detail.height<=0){
					this.panelVisiable=false
				}
				this.panelBottom=e.detail.height>0?365:0
			},
			onConfirm(e:InputConfirmEvent){
				const text=e.detail.value;
				const isEmpty=text.length===0 || text.trim()===""
				if(isEmpty) return 
				this.$emit('output',text)
			}
		}
	}
</script>

<style>
.plus-btn{
	width: 80rpx;
	height: 80rpx;
	right: 50rpx;
	bottom: 50rpx;
	background-color: white;
}
.panel{
	width: 100%;
	height: 100rpx;
	background-color: white;
}
</style>

二、使用

<u-action @output="appendItemTodoList"></u-action>
	
# methods
appendItemTodoList(v:string){
	const item:Item={
		id: nanoid(),
		text: v,
		checked: true
	}
	this.list.push(item)
}