写项目时有一个想法,filestate组件里面就是下面报修项目以及报修内容中我希望采用flex布局,希望最后一个元素在最右边该如何实现了
<div class="filestate">
<van-icon name="smile-comment-o" />
<h1>报修人</h1>
<input class="reportman" type="text" v-model="rname">
</div>
.filestate input{
border: none;
background-color: rgba(0,0,0,0);
font-size: .36rem;
font-family: '楷体';
line-height: .88rem;
/* margin-left: auto; */
width: auto;
}
可以通过设置margin-left:auto方法实现最后一个元素在最右边
但还有个问题就是如何使input的内容与元素内容一样宽,当时想的是能不能给width写一个auto就行了结果是不行
搜了一圈好像使用css只能通过计算多少个字来计算定宽才行,单纯用css并不能用所以只能通过js进行自定义。
一开始想的时在挂载时获取与之绑定的data数据的长度然后乘以设置的文字大小,但如果使用v-model绑定data数据的话,挂载时data数据没有完全渲染无法获取到长度甚至会报错
所以只能通过传统方法获取其值
resetinput(){
let name = document.getElementById('reportman').value
let phone = document.getElementById('reporphone').value
console.log(phone.length+'哈'+name.length)
}
能够得到长度了,现在就该设置input的长度了
//重置input长度
resetinput(){
let name = document.getElementById('reportman')
let phone = document.getElementById('reporphone')
let namelength = name.value.length*0.36
name.style.width = namelength+'rem'
}
好成功完成效果,剩下的在挂载页面时调用方法就行了
mounted () {
var _this = this;
_this.resetinput()
}
好吧,一阵猛c结果是没搞清楚如何在钩子函数里面调用data数据,行吧,这波是我菜了