目前需求:发布帖子时可以选择不同模板,模板会根据内容定位光标的位置。

达到效果:点击模版显示内容并设置光标位置,切换模版后键盘隐藏->更新内容->键盘显示->光标设置。

平台:目前在微信小程序端测试正常

//----html
<textarea v-model="content" @blur="onBlur" :focus="focus" :cursor="curCursor" auto-height maxlength="500" @input="bingContentInput" placeholder="请输入你得内容"></textarea>

//----js vue

//模板列表
const templates = ref([]) 
//当前光标
const curCursor = ref(0)
//当前焦点
const focus = ref(false)

//失去焦点重置
const onBlur = (e) => {
    focus.value = false
	curCursor.value = 0
}

//切换模版方法
const useTemplate = (idx) => {
	if (templates.value[idx].content) { //是否有模版内容
        //使键盘隐藏
		focus.value = false
        //模版内容
		content.value = templates.value[idx].content
        //延时后设置焦点弹出键盘
		setTimeout(()=>{
			nextTick(()=>{
				curCursor.value = templates.value[idx].cursorPosition
				focus.value = true
			})
		}, 600) //时间可动态调整,键盘的隐藏和现实动画在300,但是需要设置大一点
			
	}
}



Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐