基于vue和flex实现页面可配置组件顺序

需求

已有实现:页面存在A、B、C三个组件按照ABC顺序展示,不支持后台配置顺序 期望改成:组件的顺序支持配置,比如后台配置B,C,A,那么页面的展示顺序为B、C、A

实现

方案实现,需要考虑不能影响到组件原来的逻辑,还需要考虑可扩展性,比如后续迭代新增一个组件D,可以方便地接入本方案。

实现的核心就是利用flex布局的order设置组件的顺序。

假设产品经理/运营人员配置的order是B,C,A,我们先把这串字符串改为配置映射

js 复制代码
const getOrderConfig = (order) => {
  const orderConfig = {}
  order.split(',').forEach((orderKey, index) => {
    orderConfig[orderKey] = index + 1
  })
  return orderConfig
}

实现一个flex布局的包裹组件OrderWrapper,结合使用vue的具名插槽,插槽的name就是上述配置映射的orderKey

vue 复制代码
<script setup name="OrderWrapper">
import { defineProps, computed } from 'vue'

const props = defineProps({
  orderConfig: {
    type: Object,
    default: () => ({}),
  }
})

const orderKeys = computed(() => Object.keys(props.orderConfig))
</script>

<template>
  <div style="display:flex;flex-direction:column;">
    <div
      v-for="orderKey in orderKeys"
      :key="orderKey"
      :style="{ order: orderConfig[orderKey] }"
    >
      <slot :name="orderKey" />
    </div>
  </div>
</template>

OrderWrapper组件的使用如下:

vue 复制代码
<Comp :order-config="orderConfig">
  <template v-slot:A>
    <A />
  </template>
  <template v-slot:B>
    <B />
  </template>
  <template v-slot:C>
    <C />
  </template>
</Comp>

如果想自己改改代码,试试效果,可以点下面这个playground链接

示例代码的playground演示

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js