vue实现动态详情页面

像上述的详情页面，可能每个字段都会在页面写死，这样会影响页面结构，代码可读性较差，可维护性也不好，冗余的结构和样式代码也会大大增加。

因此这些详情页面，应该通过动态遍历来实现：

父组件
<template>
  <div class="dynamic-detail">
    <div class="content-container">
      <common-detail
        v-for=" (item, idx) in testArr "
        :key="idx"
        :item-data="item"
      >
      </common-detail>
    </div>
  </div>
</template>

<script>
import CommonDetail from '@/components/DetailItem'
export default {
  name: 'DynamicDetail',
  components: {
    CommonDetail
  },
  data () {
    return {
      testObj: {
        id: 778899,
        permission: 'hmk'
      },
      testArr: [
        {
          label: '口号',
          value: '今天不努力，明天拧螺丝',
          name: '口号'
        },
        {
          label: '公司',
          value: 'XXXX',
          name: '公司',
          style: { color: 'skyblue' },
          clickFn: () => {
            console.log(this.testObj.id)
          }
        },
        {
          label: '每天一个小技巧',
          value: '多学多看多总结',
          name: '每天一个小技巧',
          formatFn: () => {
            if (this.testObj.permission) {
              return '多学多看多总结'
            } else {
              return '没权限'
            }
          }
        },
        {
          label: '时间',
          value: '2021-11-23',
          name: '时间',
          formatFn () {
            if (this.value) {
              console.log(this.value)
              return new Date(this.value)
            }
          }
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">
.dynamic-detail {
  position: relative;
  background-color: #f1f1f1;
  height: 100vh;
  overflow: hidden;
  .content-container {
    margin: 8px;
    border-radius: 8px;
    padding: 12px 16px;
    background-color: #fff;
  }
}
</style>

子组件
<template>
  <div class="detail-item">
    <div class="label">{{ itemData.label }}</div>
    <div
      class="content"
      :style="itemData.style"
      @click.stop="itemData.clickFn && itemData.clickFn()"
    >
      {{ itemData.formatFn ? itemData.formatFn() : itemData.value }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonDetail',
  props: {
    itemData: {
      type: Object,
      default: {}
    }
  },
  methods: {
    formatFn (itemData) {

    }
  }
}
</script>

<style scoped lang="less">
.detail-item {
  margin-bottom: 12px;
  .label {
    color: #999999;
    font-size: 14px;
    line-height: 20px;
  }
  .content {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
  }
}
</style>