gpt4 book ai didi

javascript - 观察vue中的div宽度变化

转载 作者:太空宇宙 更新时间:2023-11-03 19:25:17 25 4
gpt4 key购买 nike

我有一个 nuxt 应用程序,其中有两个侧边栏,一个在左侧,一个在右侧。

两者都是固定的,主体从左右两侧都有填充。

在中间我有<nuxt/>加载页面。

左侧边栏可以最小化为60px所以我不能为此使用媒体查询,我需要注意 <nuxt/> width更改,以防宽度为 < 500px我会添加一些其他类(class)。类似于元素而不是视口(viewport)的媒体查询。

有没有办法在没有额外的 javascript 库、插件等的情况下做到这一点?

最佳答案

更新了两个 slider 示例:

实现所需行为的一种方法是将动态 width 绑定(bind)到您的 slider 并观察 width 属性,然后使用元素 ref 绑定(bind)类 发生变化时:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
el: "#app",
data() {
return {
silderWidth: {
first: '100',
second: '100'
}
}
},
computed: {
first() {
return this.silderWidth.first
},
second() {
return this.silderWidth.second
}
},
methods: {
toggleWidth(ele) {
this.silderWidth[ele] === '100' ?
this.silderWidth[ele] = "200" :
this.silderWidth[ele] = "100"
}
},
watch: {
first() {
this.$nextTick(() => {
this.silderWidth.first === '200' ?
this.$refs.silderWidth1.classList.add('background') :
this.$refs.silderWidth1.classList.remove('background')
})
},
second() {
this.$nextTick(() => {
this.silderWidth.second === '200' ?
this.$refs.silderWidth2.classList.add('background') :
this.$refs.silderWidth2.classList.remove('background')
})
}
}
})
.silder {
background-color: red;
height: 200px;
}

.silder--1 {
position: fixed;
left: 0;
top: 0;
}

.silder--2 {
position: fixed;
right: 0;
top: 0;
}

.background {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="silder silder--1" ref="silderWidth1" :style="{ width : first + 'px'}" @click="toggleWidth('first')"></div>
<div class="silder silder--2" ref="silderWidth2" :style="{ width : second + 'px'}" @click="toggleWidth('second')"></div>
</div>

关于javascript - 观察vue中的div宽度变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57451602/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com