uniapp 仿微信朋友圈点击评论唤起软键盘并自定义输入框占位符

实现效果如下：

点击写笔记按钮，需要直接唤起软键盘，并且键盘上方显示详情内容，输入框内自定义占位符

 

 新建一个子组件，内容如下

<template>
	<view class="">
		<view class="input-box">
			<view class="details">{{details}}</view>
			<view class="in_bot">
				<u--textarea :height="60" :cursorSpacing="100" class="textbox" v-model="val"
				 placeholder="来写下你对此点子的想法吧~" :showConfirmBar="false" :focus="commit" border="none" @blur="blur" :placeholderStyle="placeholderStyle"></u--textarea>
				<view class="view-btn">
					<button class="but" type="primary" @tap="send">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				val: '',
				placeholderStyle:{
					padding:'30rpx 0'
				}
			}
		},
		props:{
			commit: {
			  type: Boolean,
			  default: false,
			},
			details: {
			  type: String,
			  default: '',
			},
		},
		methods: {
			send() {
				this.$emit("submit", this.val)
				this.val = '';
			},
			blur(){
				this.$emit('blurCom')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.input-box {
		width:686rpx;
		min-height: 210rpx;
		padding: 32rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 15;
		.details{
			width: 686rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.in_bot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
			.textbox{
				width: 500rpx;
				height: 110rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
			}
		}
		
		.but {
			width: 130rpx !important;
			height: 64rpx;
			background: #000000;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 64rpx;
			color: #ffffff;
			margin-left: 30rpx;
			
		}
	}
</style>

父组件中写笔记按钮加点击事件，并引入子组件

<view class="butt" @click="writeNote">写笔记</view>
				<view class="note_cover" v-if="focus"></view>
				<input-box v-if="focus" :details="detailInfo.idea_name" :commit="focus" @submit="submitNote" @blurCom="blurCom"></input-box>

// 点击写笔记，唤起软件盘
			writeNote(){
				this.focus = false
				this.$nextTick(()=>{
					this.focus = true
				}) //唤起软键盘
			},

最后是提交笔记和失焦事件

// 失焦，关闭软件盘
			blurCom(){
				this.focus = false
			},
			// 提交笔记
			submitNote(val){
				writeNote({
					idea_id:this.detailInfo.id,
					notes:val,
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				})
				this.focus = false
			},