老规矩先来看看效果噻!
从上面的录屏中我们可以看出,要实现input自由选中内容的功能是可以实现的,原理其实很简单。
直接运行即可
<template><view><!-- <input class="psd"type="digit" :value="inputValue" :focus='focus' selection-start='0' :selection-start='inputValue.length' :selection-end="inputValue.length"bindinput="bindInput" @blur='bindBlur'></input><view class="cover-view" @tap="handleInput"></view> --><view class="pickbox"><input class="uni-input" type="text" v-model="value" :focus="renameFocus" :selection-start="start" :selection-end="end" @blur="bindblur"/><button type="default" @click='pitch'>选中</button></view></view>
</template><script>export default{data(){return{focus: false,inputValue:9890,value:'选中输入框内容',renameFocus:false,start:-1,end:-1}},methods: {handleInput(e) {// this.setData({this.inputValue= parseFloat(this.inputValue)this.focus= true// })},bindInput(e) {this.setData({inputValue: e.detail.value})this.handleData()},bindBlur() {// this.setData({this.inputValue= this.inputValuethis.focus= falseconsole.log(this.focus)},pitch(){this.renameFocus=truethis.start=0this.end=this.value.toString().length},bindblur(){this.renameFocus= falsethis.start= -1this.end= -1},}}
</script><style>.psd {width: 70%;height: 80rpx;border: 1rpx solid #8a8a8a;border-radius: 20rpx;margin: 60% auto 0 auto;font-size: 32rpx;padding-left: 10rpx;}.cover-view {width: 70%;height: 80rpx;border-radius: 20rpx;opacity: 0;position: relative;left: 15%;top: -80rpx;z-index: 10;}</style>