网站用户体验诊断,建设网站建设网站,潍坊企业自助建站,搜索引擎seo关键词优化前言
在开发微信小程序时#xff0c;使用 textarea 组件可能会遇到一些棘手的问题。最近我在使用 uniapp 开发微信小程序时#xff0c;就遇到了两个非常令人头疼的问题#xff1a;
层级穿透#xff1a;由于 textarea 是原生组件#xff0c;任何元素都无法遮盖住它。当其…前言
在开发微信小程序时使用 textarea 组件可能会遇到一些棘手的问题。最近我在使用 uniapp 开发微信小程序时就遇到了两个非常令人头疼的问题
层级穿透由于 textarea 是原生组件任何元素都无法遮盖住它。当其他元素与 textarea 重叠时就会出现层级穿透的问题。特别是在弹窗中使用 textarea 时如果弹窗有动画效果textarea 会在动画执行期间显示在页面右上角导致视觉效果非常差。如果等到动画结束后再显示 textarea又会出现突然弹出的效果影响用户体验。光标位置不正确在 iOS 设备上textarea 的光标默认会出现在文本的最前面。当文本较长时点击文本中间位置时光标仍然会出现在最前面弹出键盘后很难重新定位到需要编辑的位置使用体验非常糟糕。
为了解决这些问题我尝试了多种方案但效果都不尽如人意。最终我发现可以使用 editor 富文本编辑器组件来替代 textarea它不仅解决了上述问题还提供了更多的自定义选项。
封装 Editor 组件
editor 富文本编辑器组件不仅可以实现多行文本输入还能避免层级穿透和光标位置错误的问题甚至可以自定义光标的颜色。
官方对 editor 组件的介绍如下 富文本编辑器可以对图片、文字格式进行编辑和混排。 既然 editor 是一个富文本编辑器那么它自然可以处理带有格式的文本。我们可以通过降级使用将其作为一个普通的文本输入框输入和输出的内容都是纯文本。
我的实现代码如下
templateview classrelative!-- 编辑器区域 --editor:ideditorId:model-valuehtmlContentclassw-full bg-gray-50/50 rounded-xl p-3 text-sm min-h-[120px] text-base:placeholderplaceholder || 请输入内容...readyonEditorReadyinputhandleInput:read-onlyisReadOnly//view
/templatescript setup langts
import { EditorContext } from /types/global
import nanoid from /utils/nanoidconst props defineProps{modelValue: stringplaceholder?: stringid?: string
}()const emit defineEmits{(e: update:modelValue, value: string): void(e: blur): void
}()// 编辑器内部 HTML 内容
const htmlContent ref(props.modelValue)
// 编辑器上下文
const editorCtx refEditorContext | null(null)
const isReadOnly ref(true)// 生成唯一 id
const editorId computed(() props.id || editor-${nanoid()})
const instance getCurrentInstance()// 初始化编辑器
const onEditorReady () {uni.createSelectorQuery().in(instance).select(#${editorId.value}).context((res: any) {editorCtx.value res.context// 只设置初始内容不自动聚焦if (editorCtx.value props.modelValue) {editorCtx.value.setContents({ html: props.modelValue })}isReadOnly.value false}).exec()
}// 处理输入
const handleInput (e: any) {// 保存 HTML 内容htmlContent.value e.detail.html || // 向外发送纯文本emit(update:modelValue, e.detail.text || )
}defineExpose({editorCtx,
})
/scriptstyle scoped
:deep([id^editor]) {caret-color: rgb(99, 102, 241);
}
/style如果你有需要可以直接复制使用作为组件引入。这里面有几个注意点我介绍一下
默认的 readonly 是 true 在编辑器准备完成后修改为 true这个逻辑是因为 setContent 设置内容时会自动聚焦设置为 readonly: false 就不会触发自动聚焦了如果你需要自动聚焦可以将这段逻辑移除掉。默认暴露了 editorCtx 如果你想主动修改编辑器内容可以触发 editorCtx.setContent 去修改而不是直接修改 modelValue因为内部并没有监听 modelValue 的实时变化去修改编辑器避免多处地方同时修改编辑器内容。:deep([id^editor]) { caret-color: rgb(99, 102, 241); }用于修改编辑器中光标颜色因为我这里支持自定义 id 所以匹配了所有 editor 前缀。
通过将 textarea 替换为 editor 后你会发现效果都是一样的而且在 ios 端的使用体验会好很多手指点击哪里光标的默认位置就在哪里在效果如下图所示。 注意点editor 组件在 focus 时在 ios 设备上是不会获取到键盘高度的因此如果你有工具栏放在键盘上的需求在替换组件时需要慎重考虑。 总结
如果你想查看 editor 组件的实际效果可以搜索学习卡盒小程序在卡片页面长按编辑尝试一下看看效果是否符合你的需求。希望这篇文章能帮助你解决遇到的问题。如果对你有帮助欢迎点赞支持
