初始化使一个页面的两个小模块在栅格化布局的情况下,判断列>14时,展示为两个模块并行
<14时展示为只有一个模块
<首页有多个模块,每个模块是一个组件,拼合在一起>
代码如下:
<my-work v-if=“item.moduleCode === ‘myWork’” :moduleCode=“item.moduleCode” ref=“myWorks” @refreshOk=“refreshOk”>
先是将work组件中的内容放入父组件中。
在my-work中加入 :modelGride=“item.w”
=><my-work v-if=“item.moduleCode === ‘myWork’” :modelGride=“item.w” :moduleCode=“item.moduleCode” ref=“myWorks” @refreshOk=“refreshOk”>
w即为这个模块
而这一步就是将这个模块在初始页面的值传到my-work子组件中
因为是需要初始化阶段直接判断一个大模块的列数,所以在mounted中进行操作
//初始化判断modelGride是否大于14
if (this.modelGride > 14) {
this.isMaxRowWork = true
}
而当切换成拖拽模式,在拖拽这个模块的时候,也需要判断当列大于14时,展示为两列
拖拽布局在这里的应用是,运用EventBus
if (item.moduleCode === ‘myWork’) {
EventBus.KaTeX parse error: Expected 'EOF', got '}' at position 34: …', item) }̲ 在执行拖拽动作的时候,发送…on(‘resizeMyWork’, (item) => {
that.isMaxRowWork = item.w > 14
})
这就是在拖拽的时候进行判断列。
09-10