Vue多布局模式实现方法详细讲解（vue页面布局框架）奔走相告

目录1、目标效果2、原理分析

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: {
}
})

<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>

<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>

<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>

<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>

<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>

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自适应布局postcss-px2rem详解Vue实现拖拽式分割布局vue实现多栏布局拖拽vue-cli中实现响应式布局的方法Vue-cli 移动端布局和动画使用详解vue实现简单瀑布流布局vue中使用rem布局代码详解vue实现中部导航栏布局功能