章
目
录
前端开发经常会遇到一些需求变更，就像这次，原本页面上A、B、C三个组件是固定按照ABC顺序展示的，但现在要求支持后台配置组件顺序。比如说，后台配置为B,C,A，页面就得按照B、C、A的顺序展示。这个需求该怎么实现呢？下面就来详细讲讲。
一、需求分析
最初，页面上的组件顺序是固定的，这在功能上可能满足了前期的要求。但随着业务的发展，需要增加灵活性，让运营人员或产品经理能够通过后台配置来改变组件的展示顺序。在实现这个新需求时，有两个关键要点需要考虑：一是不能影响组件原来的逻辑，每个组件都有自己独立的功能，改变顺序不能破坏这些功能；二是要具备良好的可扩展性，因为后续可能还会新增组件，比如添加组件D，新的方案要能方便地将其接入。
二、实现方案核心思路
实现这个功能的核心是借助flex布局的order属性来设置组件的顺序。简单来说，order属性可以改变弹性盒子中项目的排列顺序。我们可以根据后台配置的组件顺序，给每个组件设置对应的order值，从而实现组件顺序的自由调整。
三、具体实现步骤
（一）配置映射函数
首先，我们需要一个函数，将后台配置的字符串（比如B,C,A）转换为配置映射对象。这个对象的键是组件名称，值是对应的顺序值。代码如下：
const getOrderConfig = (order) => {
const orderConfig = {}
order.split(',').forEach((orderKey, index) => {
orderConfig[orderKey] = index + 1
})
return orderConfig
}
在这段代码中，getOrderConfig函数接收一个表示组件顺序的字符串order。它先创建一个空对象orderConfig，然后通过split(',')方法将字符串按逗号分割成数组。接着，使用forEach方法遍历这个数组，index表示当前元素在数组中的索引，从0开始。我们将每个组件名称作为键，索引值加1作为值，存入orderConfig对象中。最后返回这个配置映射对象。
（二）创建Flex布局包裹组件
接下来，创建一个名为OrderWrapper的Vue组件，它用于包裹需要调整顺序的组件。这个组件结合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>
在<script setup>部分：
- 首先通过
defineProps定义了一个名为orderConfig的属性，它的类型是对象，默认值是一个空对象。这个属性用于接收配置映射对象。 - 然后使用
computed计算属性创建了orderKeys，它通过Object.keys(props.orderConfig)获取配置映射对象的所有键，也就是组件名称，这样我们就能遍历这些组件名称来动态渲染组件。
在<template>部分：
- 外层
<div>设置了display:flex和flex-direction:column，表示使用垂直方向的弹性布局。 - 内部通过
v-for指令遍历orderKeys，为每个组件创建一个<div>。key属性设置为当前的orderKey，用于提高Vue渲染的效率。 - 通过
:style="{ order: orderConfig[orderKey] }"为每个<div>设置order样式，其值就是配置映射对象中对应组件的顺序值。 <slot :name="orderKey" />表示具名插槽，会根据name的值插入对应的组件。
（三）使用OrderWrapper组件
最后，在使用OrderWrapper组件时，按照以下方式编写代码：
<Comp :order-config="orderConfig">
<template v-slot:A>
<A />
</template>
<template v-slot:B>
<B />
</template>
<template v-slot:C>
<C />
</template>
</Comp>
这里的<Comp>就是OrderWrapper组件，order-config属性绑定了配置映射对象orderConfig。在组件内部，通过<template v-slot:A>、<template v-slot:B>和<template v-slot:C>分别定义了名为A、B、C的具名插槽，并在其中插入对应的组件A、B、C。这样，组件就会按照配置映射对象中的顺序进行展示。
如果大家想要亲自修改代码，体验一下效果，通过以上方法，我们就利用Vue和Flex成功实现了页面组件顺序的可配置功能，既满足了当前需求，又具备良好的扩展性，方便后续新增组件的接入，你学会了吗。
