Vue 单独页面设置 body 样式
需求:针对不同的页面,的样式需要做一些变化。比如不同页面设置不同的背景色,如果直接在页面里设置 body 的样式,页面并不会生效,如下:<template><div>单独页面</div></template><style>body {backgroud-color: #ccc;min-width:400px;}</style>
·
需求:针对不同的页面, 的样式需要做一些变化。比如不同页面设置不同的背景色,如果直接在页面里设置 body 的样式,页面并不会生效,如下:
<template>
<div>单独页面</div>
</template>
<style>
body {
backgroud-color: #ccc;
min-width:400px;
}
</style>
解决方法
<template>
<div>单独页面</div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
// ...
window.document.body.style.minWidth = "1500px";
next();
},
beforeRouteLeave(to, from, next) {
// ...
window.document.body.style.minWidth = "1280px";
next();
},
}
</script>
<style>
body {
backgroud-color: #ccc;
min-width:400px;
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)