以下代码直接给页面的html或body添加css样式,均可以实现网页的黑白效果。
.html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
}
在vue项目中,可以在app.vue页面中。判断当前是否需要显示黑白页面。
watch: {
"$store.state.switchValue"(newValue, old) {
if (newValue === true) {
document.querySelector("html").classList.add("html");
}
if (newValue === false) {
document.querySelector("html").classList.remove("html");
}
},
},
我在vuex中,存储了是否需要黑白显示的变量。在修改该变量的时候,记得要同步修改vuex中的值。
watch: {
// 侦听是否黑白模式
switchValue(newValue, oldValue) {
this.$store.commit("setSwitchValue", newValue);
},
},
如果需要使用vuex存储该变量,那么控制当前变量的组件,v- model所绑定的值,同时需要从vuex中获取。
data() {
return {
// 黑白模式v-model
switchValue: this.$store.state.switchValue,
};
},