开发需求4-vue组件排序（插槽实现）

组件排序-插槽实现

作用及意义

可以帮助我们实现修改页面上各模块组件的显示顺序

举个例子：一个页面显示广告有A、B、C，我们默认显示客户A、B、C，但是有1/4客户对广告B诉求比较大，我们希望这部分客户看到的广告顺序是B、A、C。而我们这个组件，就能实现这样的效果。

实现方案

index.vue

<template>
	<div>
		<sortCompenent :areaId="areaId" :defaultSorts="['compA', 'compB', 'compC']">
			<template v-slot:compA>
				<compA />
			</template>
			<template v-slot:compB>
				<compB />
			</template>
			<template v-slot:compC>
				<compC />
			</template>
		</sortCompenent>
	</div>
</template>
<script>
import sortCompenent from './sort-component'
import compA from './compA'
import compB from './compB'
import compC from './compC'
export default {
	name: 'index',
	components: {
		compA,
		compB,
		compC,
		sortCompenent
	},
	props: {
		areaId: 'IOP-AREA-8722',
	}
}
</script>
<style scoped>
</style>

sort-component

<template>
  <div class="wrap">
    <div v-for="item in uiSorts" :key="item">
      <slot :name="item"></slot>
    </div>
  </div>
</template>

<script>
import { getContentDoAdInfo } from './js/useZhiTui'
import { felog } from '@pa/pa-kit/felog'
export default {
  // vue component name
  name: 'ASortComponent',
  props: {
    // 区域id
    areaId: {
      type: String,
      default: ''
    },
    defaultSorts: {
      type: Array,
      default: function () {return []}
    },
    env: {
      type: String,
      default: 'prod'
    }
  },
  data() {
    return {
      sortsCompList: [],
      apiDomain: {
        prod: 'https://rsb.pingan.com.cn/brcp/stp/cust/iop/rtb/iop/strategy/mrContent.do?',
        fat: 'https://rsb-stg.pingan.com.cn/brcp/stp/cust/iop/rtb/iop/strategy/mrContent.do?',
        uat: 'https://rsb-stg.pingan.com.cn/brcp/stp/cust/iop/rtb/iop/strategy/mrContent.do?',
        unit: 'https://rsb-stg.pingan.com.cn/brcp/stp/cust/iop/rtb/iop/strategy/mrContent.do?',
        development: 'https://rsb-stg.pingan.com.cn/brcp/stp/cust/iop/rtb/iop/strategy/mrContent.do?',
        dev: 'https://rsb-stg.pingan.com.cn/brcp/stp/cust/iop/rtb/iop/strategy/mrContent.do?'
      }
    }
  },
  components:{
  },
  computed: {
    uiSorts () {
      if (this.sortsCompList && this.sortsCompList.length > 0) {
        return this.sortsCompList
      }
      return this.defaultSorts
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const urlMap = this.apiDomain[this.env]
      const {err, json = {} } = await getContentDoAdInfo(this.areaId, this.context, urlMap)
      try {
        const list = json?.data?.list
        console.log('list', list)
        if (list.length > 0) {
          const compNameStr = JSON.parse(list[0].advertInfo[0].ext).componentName
          this.sortsCompList = eval('(' + compNameStr + ')')
          console.log('this.sortsCompList', this.sortsCompList)
        }
      } catch (error) {
        felog.error('智推接口出参处理出错', error)
      }
    }
  }
}
</script>
<style scoped>
	.wrap {
	    padding: 0 10px;
	    background: #ccc;
	}
</style>

目录层级