uniapp 光标位置 uni-easyinput input nvue vue

背景:最近写uniapp的时候图方便用了个nvue组件显示视频,后来用了uni-easyinput组件想拿到光标位置,搞了半天大无语了属于是。图个方便反而浪费时间。

uni-easyinput组件:

1.此标签添加ref="pl_input"目的为获取此元素
<input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input"
				:style="inputStyle" :name="name" :value="val" :password="!showPassword && type === 'password'"
				:placeholder="placeholder" :placeholderStyle="placeholderStyle"  ref="pl_input"
				placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" 
				 :focus="focused" :confirmType="confirmType" @focus="_Focus" @blur="_Blur" @input="onInput"
				@confirm="onConfirm" />

2.下面props数组添加值,目的为得知组件使用方想要获取光标位置了
cursori: {
				type: Boolean,
				default: false
			},
			
3.watch中添加,内部调用的两个方法自己看情况使用。里面的页面类型是组件使用方的页面类型。
cursori(newVal) {
				this.$refs.pl_input.getSelectionRange((res) => {//获取光标位置
					console.log(res)
					this.$emit("scursor",res);//传递光标位置
				})//可获得光标位置nvue可用
				
				// uni.getSelectedTextRange({
				//   success: res => {
				//   }
				// })//可获得光标位置vue可用nvue不可用
			},

组件使用方:

1.添加 :cursori="input_pl_cursor"用于告知组件返回光标信息, @scursor="setinput_pl_cursor"用于接收信息
<uni-easyinput focus="true" :cursori="input_pl_cursor" @scursor="setinput_pl_cursor"  v-model="input_pl" suffixIcon="paperplane" class="plhf_input" @iconClick="fbplfh()" placeholder="善于结善缘,恶语伤人♥."></uni-easyinput>

2.根据需求   this.input_pl_cursor=!this.input_pl_cursor;来触发组件返回的方法

3.setinput_pl_cursor方法示例
	setinput_pl_cursor(res){//获取光标位置
			console.log("组件返回光标起始位置"+res.selectionStart);
			console.log("组件返回光标终止位置"+res.selectionEnd);
		},

效果:
在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

翎墨袅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值