1. 首页
  2. 问答
  3. [youzan/vant]van-field获取光标位置时通过this.$refs方式现在会报undefined

[youzan/vant]van-field获取光标位置时通过this.$refs方式现在会报undefined

2023-12-12 987 views
6
重现链接

https://codesandbox.io/s/vant-3-issue-template-forked-t0jovf

Vant 版本

4.1.2

描述一下你遇到的问题。

需要获取输入框van-field(type="textarea", ref="content")中的光标位置插入图片名称，之前网站是用2.x，用

let startPos = this.$refs.content.$refs.input.selectionStart;
let endPos = this.$refs.content.$refs.input.selectionEnd;

就可以获取到光标选择的开始和结束位置 现在升级到最新版4.1.2，这个地方报undefined，原因是

this.$refs.content.$refs.input

这个获取到的是undefined,也就是this.$refs.content.refs下面现在不是input了，打印出来看到这个下面没有东西。 请问在4.1.2版本中我怎么用这种方式获取光标选择起始位置？this.refs.content下面该获取什么？

重现链接已附上。

谢谢

重现步骤
  1. 创建van-field元素，ref="content"
  2. 使用this.$refs.content.$refs.input.selectionStart获取光标选择开始位置，报undefined
设备/浏览器

vue3.2.47 chrome111

pape2016

回答

1

试试 this.$refs.content.$el.querySelector('input')

wjw-gavin

6

还是一样的错误

      this.startPos = this.$refs.content.$el.querySelector('input').selectionStart;

Cannot read properties of null (reading 'selectionStart')

pape2016

1

input 换成 textarea，因为你type＝textarea，渲染的是textarea

wjw-gavin

7

我试过改成textarea，在自己的项目和codesandbox重现项目里都试了，都是undefined。

this.startPos = this.$refs.content.$refs.textarea.selectionStart;
this.startPos = this.$refs.content.$el.querySelector('textarea').selectionStart;

这两种方式都试了

pape2016

6

$el.querySelector(“textarea”)可以了，可能是昨晚在codesandbox试的时候，显示了$refs.textarea不行，然后改了代码还没加载完就点按钮了结果报错了。 刚才试了一下，$el.querySelector(“textarea”)可以，$refs.textarea还是不行，2.x是可以的。难道4.x移除了ref标记所以要用querySelector去选取元素，不管怎样，至少$el可以取到元素，当然，能否考虑一下恢复以前$refs的方式，可能更好，Vue的文档也提到推荐模板引用而不是$el。

非常感谢@wjw-gavin ！

pape2016

8

并不是 4.x 移除了ref，而是它使用了组合式 API 的方式搭建的组件，对于ref的绑定 image 所以我理解的是如果“子组件”VanField使用选项式 API 搭建时，依然可以通过$ref.xxx来获取的模板的。 对于组合式 API 推荐使用defineExpose image

wjw-gavin

9

明白了，所以vue3.x之后，如果我们不刻意的去开放组件，是无法沿用$refs方式的，而vue建议用$refs也是在选项式API内容里的建议。我桌面端用的UI框架没有影响，应该是开放了组件，所以我也以为是不影响的。 如果之后vant有开放组件，那可以用之前的方式，现在只能先用$el获取了。

谢谢@wjw-gavin

pape2016

 相关问题