文章摘要
这篇文章介绍了使用Vue2实现多布局+暗黑模式功能的实现方法。文章通过Vuex组件管理布局类型和暗黑模式状态，并详细描述了不同布局的实现过程。
1. **布局结构**：文章定义了默认布局、顶部布局和侧边栏布局三种布局方式，分别通过头部宽度和侧边栏、内容区的分配来实现多布局需求。
2. **状态管理**：使用Vuex管理布局类型和是否为暗黑模式的状态，通过`mapState`方法获取状态，并通过`set`方法对状态进行更新。
3. **组件实现**：介绍了默认布局、顶部布局、侧边栏布局各一个Vue组件，并通过`Home.vue`组件渲染不同布局，实现动态布局切换。
4. **背景色切换**：通过CSS样式和JavaScript代码实现了暗黑模式切换，使用`el-icon-check`组件标记已选中的布局类型。
5. **错误处理**：提到了使用`computed`属性时遇到的问题，并展示了通过`set`方法解决状态更新的问题。
整体文章通过组件化和状态管理的方式，实现了多布局和暗黑模式功能，展示了Vue2在复杂布局场景中的应用。
目录1、目标效果2、原理分析
源码地址：multipal-layout-demo: vue2实现多布局+暗黑模式
默认布局：头部宽度100%，侧边栏、内容区
顶部布局：头部宽度100%，内容区
侧边栏布局：侧边栏高度100%，头部、内容区
（1）vuex文件
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 暗黑模式
isDark: false,
// 布局类型
layoutType: ‘default’
},
mutations: {
// 修改暗黑模式
set_is_dark(state, val) {
state.isDark=val
},
// 修改布局类型
set_layout_type(state, val) {
state.layoutType=val
}
},
actions: {
},
modules: {
}
})
（2）布局缩略图如何实现？用div + css 手动实现布局样式
父组件传递一个布局类型数组，遍历此组件；用一个变量保存索引值，点击不同的布局类型项时切换索引并在vuex修改当前选中的布局类型
将缩略图封装成组件：Thumbnail.vue
<template>
<!– 缩略图 –>
<div class=”thumbnail”>
<div class=”layout” v-for=”(item, index) in layouts” @click=”changeCheck(item, index)”>
<template v-if=”item.type==’default'”>
<div class=”top” :style=”{ background: isDark ? ‘black’ : ‘#fff’ }”></div>
<div class=”left” :style=”{ background: isDark ? ‘black’ : ‘#fff’ }”></div>
</template>
<template v-if=”item.type==’top'”>
<div class=”top” :style=”{ background: isDark ? ‘black’ : ‘#fff’ }”></div>
</template>
<template v-if=”item.type==’slide'”>
<div class=”top”></div>
<div class=”left” :style=”{ background: isDark ? ‘black’ : ‘#fff’ }”></div>
</template>
<i class=”el-icon-check” v-show=”checked==index”></i>
</div>
</div>
</template>
<script>
import { mapState } from ‘vuex’
export default {
props: {
// 布局类型数组
layouts: {
type: Array,
default: ()=> []
}
},
data() {
return {
// 当前选中值
checked: 0,
}
},
computed: {
// 获取是否是暗黑模式，从而缩略图实现暗黑效果
…mapState([‘isDark’])
},
methods: {
// 切换选中值
changeCheck(item, index) {
this.checked=index
this.$store.commit(‘set_layout_type’, item.type)
}
}
}
</script>
<style lang=”less” scoped>
.thumbnail {
display: flex;
width: 100%;
.layout {
position: relative;
width: 50px;
height: 50px;
border: 1px solid gray;
overflow: hidden;
background: #f0f0f0;
border-radius: 5px;
cursor: pointer;
.top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 25%;
}
.left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 25%;
height: 100%;
}
.el-icon-check {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
}
}
}
</style>
（3）建立多个不同类型的布局文件：
侧边栏布局 ：src/views/layout/SlideLayout.vue
<template>
<!– 侧边栏布局 –>
<div>
<Sliderbar></Sliderbar>
<Header></Header>
<div class=”content-box”>
<router-view />
</div>
</div>
</template>
<script>
import Sliderbar from ‘@/components/Sliderbar.vue’
import Header from ‘@/components/Header.vue’
export default {
components: {
Header,
Sliderbar,
},
}
</script>
<style lang=”less” scoped></style>
默认布局布局：src/views/layout/DefaultLayout.vue
<template>
<!– 默认布局 –>
<div>
<Header></Header>
<Sliderbar></Sliderbar>
<div class=”content-box”>
<router-view />
</div>
</div>
</template>
<script>
import Header from ‘@/components/Header.vue’
import Sliderbar from ‘@/components/Sliderbar.vue’
export default {
components: { Header, Sliderbar },
}
</script>
<style lang=”less” scoped></style>
顶部布局：src/views/layout/TopLayout.vue
<template>
<!– 顶栏布局 –>
<div>
<Header></Header>
<div class=”content-box”>
<router-view />
</div>
</div>
</template>
<script>
import Header from ‘@/components/Header.vue’
export default {
components: {
Header,
},
}
</script>
<style lang=”less” scoped></style>
（4）首页组件 Home.vue，Home.vue下面渲染二级路由
<template>
<!– vuex获取选中的布局类型 –>
<div>
<defaultLayout v-show=”layoutType==’default'”></defaultLayout>
<slideLayout v-show=”layoutType==’slide'”></slideLayout>
<topLayout v-show=”layoutType==’top'”></topLayout>
</div>
</template>
<script>
import defaultLayout from ‘https://www.jb51.net/javascript/layout/DefaultLayout.vue’
import slideLayout from ‘https://www.jb51.net/javascript/layout/SlideLayout.vue’
import topLayout from ‘https://www.jb51.net/javascript/layout/TopLayout.vue’
import { mapState } from ‘vuex’
export default {
components: { defaultLayout, slideLayout, topLayout },
computed: {
…mapState([‘layoutType’])
},
}
</script>
<style lang=”less” scoped></style>
（5）暗黑模式、布局类型变量都是保存在vuex中，因为多个组件之间进行数据通信比较方便！通过mapState取出vuex数据，然后通过computed接受mapState值，但如果想要直接修改mapState中的值则会报以下的错误：
computed property “isDark” was assigned to but it has no setter.
这是因为computed为只读的。不能直接修改computed的数据，要想修改则使用set
computed: {
…mapState([‘isDark’]),
// computed property “isDark” was assigned to but it has no setter. 这是因为computed为只读的。不能直接修改computed的数据，要想修改则使用set
darkMode: {
get() {
return this.isDark
},
set(val) {
this.$store.commit(‘set_is_dark’, val)
// 获取html根元素标签
let html=document.documentElement
if (val) {
// html添加class=”dark”选择器
html.classList.add(‘dark’)
} else {
// html移除class=”dark”选择器
html.classList.remove(‘dark’)
}
}
}
},
到此这篇关于Vue多布局模式实现方法详细讲解的文章就介绍到这了,更多相关Vue多布局模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:vue自适应布局postcss-px2rem详解Vue实现拖拽式分割布局vue实现多栏布局拖拽vue-cli中实现响应式布局的方法Vue-cli 移动端布局和动画使用详解vue实现简单瀑布流布局vue中使用rem布局代码详解vue实现中部导航栏布局功能