有个执行顺序的问题。将textarea中的focus属性绑定一个ref属性isFocus(默认值为false),然后在打开弹窗的时候利用nextTick方法,将isFocus属性变为true即可完成在小程序的弹窗中的textarea中光标的聚焦。最后在失去焦点的时候,再将isFocus再设为false
解决代码如下:
//光标聚焦
const isFocus = ref(false)
//打开弹出层
const clickComment = () => {
commentPopup.value.open();
nextTick(()=>{
isFocus.value = true;
})
}
弹出层代码:
<!-- 底部评论弹窗层 -->
<uni-popup ref="commentPopup" type="bottom">
<view class="commentPopup" :style="{bottom:PopupBottom + 'px'}">
<view class="commentPopup-top">
<uni-rate v-model="userScore" @change="changeScore"/>
<view class="player">JackLove · 第一局</view>
</view>
<view class="commentPopup-comment">
<textarea ref="textareaRef" class="text" v-model="userComment" placeholder="请输入评论..."
:show-confirm-bar="false" :fixed="true" @keyboardheightchange="changeKBHeight"
:adjust-position="false" @input="changeContent" :maxlength="-1" :focus="isFocus"
@blur="onblur" @focus="handleFocus">
</textarea>
</view>
<view class="commentPopup-bottom">
<view class="comment-emoji">
<image class="emoji" src="../../static/images/Emoji.png"></image>
</view>
<view class="submit" @click="submitComment" :class="{inputContent:hasContent}">发布</view>
</view>
</view>
</uni-popup>