Vue多布局模式实现方法详细讲解.docx

第

Vue多布局模式实现方法详细讲解

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

1、目标效果

源码地址：multipal-layout-demo:vue2实现多布局+暗黑模式

默认布局：头部宽度100%，侧边栏、内容区

顶部布局：头部宽度100%，内容区

侧边栏布局：侧边栏高度100%，头部、内容区

2、原理分析

（1）vuex文件

importVuefromvue

importVuexfromvuex

Vue.use(Vuex)

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

divv-for=(item,index)inlayouts@click=changeCheck(item,index)

templatev-if=item.type==default

div:style={background:isDarkblack:#fff}/div

div:style={background:isDarkblack:#fff}/div

/template

templatev-if=item.type==top

div:style={background:isDarkblack:#fff}/div

/template

templatev-if=item.type==slide

div/div

div:style={background:isDarkblack:#fff}/div

/template

iv-show=checked==index/i

/div

/div

/template

script

import{mapState}fromvuex

exportdefault{

props:{

//布局类型数组

layouts:{

type:Array,

default:()=[]

data(){

return{

//当前选中值

checked:0,

computed:{

//获取是否是暗黑模式，从而缩略图实现暗黑效果

...mapState([isDark])

methods:{

//切换选中值

changeCheck(item,index){

this.checked=index

this.$mit(set_layout_type,item.type)

/script

stylelang=lessscoped

.thumbnail{

display:flex;

width:100%;

.layout{

position:relative;

width:50px;

height:50px;

border:1pxsolidgray;

overflow:hidden;

background:#f0f0f0;

border-radius:5px;

cursor:pointer;

.top{

position:absolute;

left:0;

top:0;

width:100%;

height:25%;

.left{

posit