<div style="float:left" :class="screenWidth > 1680 ? 'addrInput' : 'short_input'">
data(){
return {
screenWidth: document.body.clientWidth,
timer: null,
};
},
watch: {
// 适应屏幕大小
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val;
this.timer = true;
const that = this;
setTimeout(function() {
that.timer = false;
}, 20);
}
}
},
mounted() {
const that = this;
window.onresize = () =>
(() => {
window.screenWidth = document.body.clientWidth;
that.screenWidth = window.screenWidth;
})();
},
<style lang="scss" scoped>
.addrInput /deep/.el-input__inner,
.addrInput /deep/.el-input {
width: 400px !important;
}
.short_input /deep/.el-input__inner,
.short_input /deep/.el-input {
width: 250px !important;
}
</style>
只是举例,更好的是做项目rem适配,如果单个页面这么写就行。