vue.js - 是否可以在 Vue 中删除偏好颜色方案事件侦听器?
问题描述
我尝试做一些非常简单的事情,但不知何故它不起作用。当一个组件被删除时,我想删除 evenListener,但不知何故这不起作用。有人能指出我正确的方向吗?
这是我的组件的简化版本:
<template>
<child-component :dark="darkModeEnabled" />
</template>
<script>
export default {
data () {
return {
darkModeEnabled: window.matchMedia('(prefers-color-scheme: dark)').matches
}
},
mounted () {
this.$nextTick(() => {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.setDarkMode)
})
},
beforeDestroy () {
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.setDarkMode)
},
methods: {
setDarkMode ({ matches }) {
this.darkModeEnabled = matches
}
}
}
</script>```
解决方案
您的代码不起作用,因为您在不同的MediaQueryList
对象中添加和删除。
...
mounted () {
this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
this.$nextTick(() => {
this.mediaQueryList.addEventListener('change', this.setDarkMode)
})
},
beforeDestroy () {
this.mediaQueryList.removeEventListener('change', this.setDarkMode)
}
...
推荐阅读
- graph - 带有字符串 x 轴的两个 y 轴条形图
- javascript - 使用 moment.js 查找与今天日期匹配的对象的索引
- vba - 在多页中对齐控件
- c# - Unity 中的对象不会触发,尽管碰撞器和代码是正确的
- firebase - firebase deploy 在颤振应用程序中出现错误
- django - 如何使用 Django、Pythonanywhere、CDN 和云存储来存储和提供静态图像
- javascript - React-leaflet:尽管有 onViewportChanged 处理程序,但地图仍将缩放值刷新为默认值
- javascript - “events-polyfill”导致引导点击功能在 IE11 上中断
- javascript - 计时器未按预期运行
- javascript - 如何为 API res 制作缓存?(反应.js)