vue饿了么文本域自动根据屏幕高度,动态设置autosize
<el-inputtype="textarea":autosize="autosize"placeholder="请输入内容"v-model="value"></el-input><script>data(){return {value : '',screenWidth: document.body.clientWidth,timer:fal
·
<el-input
type="textarea"
:autosize="autosize"
placeholder="请输入内容"
v-model="value">
</el-input>
<script>
data(){
return {
value : '',
screenWidth: document.body.clientWidth,
timer:false,
autosize:{ minRows: 2 }
}
},
mounted () {
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
})()
}
},
watch:{
screenWidth(val){
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if(!this.timer){
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
if(that.screenWidth <= 1536){
that.$set(that.autosize , 'minRows' , 2);
}else {
that.$set(that.autosize , 'minRows' , 3);
}
that.timer = false
},400)
}
}
},
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)