一次vue插槽的深度使用----里面有pdf-视频-链接-小程序-文字样式

<collapse
      :collapseList="collapseList"
      @handleChange="handleChange"
    >
      <template #[slotName]>
        <dynamicComponent
          class="mb-10"
          :itemInfo="componentName"
        ></dynamicComponent>
      </template>
    </collapse>
    
数据

      componentName: { type: 'verbal-5' },
      collapseList: [
        { title: '这是文字的标题', name: '1', slotName: 'tudo', type: 'verbal-5' },
        { title: '这是文字的标2', name: '2', slotName: 'tudo1', type: 'verbal-1' },
        { title: '这是文字的标题3', name: '3', slotName: 'tudo2', type: 'verbal-2' },
        { title: '这是文字的标题4', name: '4', slotName: 'tudo3', type: 'verbal-3' },
        { title: '这是文字的标题5', name: '5', slotName: 'tudo4', type: 'verbal-4' },
        { title: '这是文字的标题6', name: '6', slotName: 'tudo5', type: 'verbal-5' }
      ]

• Collapse 组件–手风琴

<template>
  <van-collapse
    class="customCollapse"
    accordion
    v-model="activeName"
    :border="false"
    @change="change"
  >
    <van-collapse-item
      v-for="(item, index) in collapseList"
      :border="false"
      :key="index"
      :title="item[filedMap.title]"
      :name="item[filedMap.name]"
    >
    // 定义一个 插槽 --在上面使用 这里 <template #[slotName]>
      <slot :name="item[filedMap.slotName]"></slot>
    </van-collapse-item>
  </van-collapse>
</template>
<script>
export default {
  data() {
    return {
      activeName: '1'
    }
  },
  props: {
    // { title: '这是文字的标题', name: '1', slotName: 'tudo' }, { title: '这是文字的标题', name: '2', slotName: '1tudo' }
    collapseList: {
      type: Array,
      default: () => ([])
    },
    filedMap: {
      type: Object,
      default: () => ({
        title: 'title',
        name: 'name',
        slotName: 'slotName'
      })
    },
    rightIcon: {
      type: String,
      default: 'arrow'
    }
  },
  methods: {
    change(val) {
      this.$emit('handleChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.customCollapse {
  /deep/ .van-collapse-item{
    margin-bottom: .32rem;
    border-radius: .53rem;
    background: #fff;
    box-shadow: 11px 22px 36px 0px rgba(0, 0, 0, 0.05);
    .van-collapse-item__content {
      padding-right: 0px !important;
    }
    .van-cell {
      height: 1.06rem;
      box-sizing: border-box;
      padding: .32rem;
      background: #FFFFFF;
      box-shadow: 11px 22px 36px 0px rgba(0, 0, 0, 0.05);
      border-radius: .53rem;
      .van-cell__title span {
        font-size: .30rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: .42rem;
      }
      &.van-collapse-item__title--expanded {
        border-radius: .53rem .53rem 0 0;
        box-shadow: unset;
      }
    }
    .van-collapse-item__wrapper {
      border-radius: 0 0 .53rem .53rem;
    }
  }
}

</style>

• dynamicComponent 组件 里面放的是各个类型 pdf - 图片 -小程序-链接-文字-视频

<template>
  <div class="sendMessageItem">
    <div style="flex: 1">
      <components :is="itemInfo.type" />
    </div>
    <a href="javascript:;" class="sendBtn"></a>
  </div>
</template>
<script>
const components = {}
// 获取typeComponent 文件下.vue 结尾的文件 并注册为组件
const componentsContext = require.context('./typeComponent', true, /.*.vue$/)

componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component).default
  const cmpName = componentConfig?.name
  cmpName && (components[cmpName] = componentConfig)
})

export default {
  components,
  props: {
    itemInfo: { // { type: 'verbal-4' }
      default: () => ({}),
      type: Object
    }
  }
}
</script>
<style lang="scss" scoped>
.sendMessageItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  .sendBtn {
    display: flex;
    width: 0.80rem;
    height: .80rem;
    // margin: 0 .04rem;
    margin: 0 0.22rem;
    background: #23A34C url('~@/assets/send.png') center;
    background-size: 105% 105%;
    border-radius: 50%;
    box-shadow: 11px 22px 36px 0px rgba(0, 0, 0, 0.05);
  }
}
</style>

• 图片

<template>
  <van-image class="image" :src="pdfIcon" />
</template>
<script>
import pdfIcon from '@/assets/pdfIcon.png'
export default {
  name: 'verbal-2',
  data() {
    return {
      pdfIcon,
      url: 'https://vd4.bdstatic.com/mda-mh304n94a79z30kj/fhd/cae_h264_nowatermark/1628035700152750005/mda-mh304n94a79z30kj.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1628069518-0-0-2ae19148907cf163f28f6490bb1f4370&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='
    }
  }
}
</script>
<style lang="scss" scoped>
.image {
  width: 5.16rem;
  height: 2.76rem;
  display: flex;
  flex-direction: row;
  background: #F2F2F2;
  border-radius: .3rem;
}
</style>

• 链接
  

<template>
  <div>
    <div class="link">
      <van-image width="44" :src="pdfIcon" />
      <div class="ml-12">
        <p class="title">这是个链接的标题，可以点....</p>
        <p class="desc">这里是链接的描述</p>
      </div>
    </div>
  </div>
</template>
<script>
import pdfIcon from '@/assets/pdfIcon.png'
export default {
  name: 'verbal-3',
  data() {
    return {
      pdfIcon
    }
  }
}
</script>
<style lang="scss" scoped>
.link {
  display: flex;
  flex-direction: row;
  padding: .16rem;
  background: #F2F2F2;
  border-radius: .15rem;
  .ml-12 {
    margin-left: .12rem;
  }
  .title {
    font-size: .12rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .desc {
    font-size: .1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}
</style>

• 小程序
  

<template>
  <div>
    <div class="miniApp">
      <van-image width="14" :src="miniAppIcon" />
      <p>欢迎来到小程序，请登…</p>
      <van-image width="105" :src="miniAppIcon" />
      <div>
        <van-image width="8" :src="appLinkIcon" />
        <span class="tips">小程序</span>
      </div>
    </div>
  </div>
</template>
<script>
import miniAppIcon from '@/assets/miniAppIcon.png'
import appLinkIcon from '@/assets/appLinkIcon.png'
export default {
  name: 'verbal-6',
  data() {
    return {
      miniAppIcon,
      appLinkIcon
    }
  }
}
</script>
<style lang="scss" scoped>
.miniApp {
  width: 3rem;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  padding: .16rem;
  background: #F2F2F2;
  border-radius: .15rem;
  p {
    font-size: .1rem;
    margin: .06rem 0 .05rem;
  }
  .tips {
    font-size: .2rem;
    margin-top: .05rem;
    margin-left: .03rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}
</style>

• pdf
• 
  

<template>
  <div>
    <div class="pdf">
      <van-image width="44" :src="pdfIcon" />
      <p>企业用品操作规范.pdf</p>
    </div>
  </div>
</template>
<script>
import pdfIcon from '@/assets/pdfIcon.png'
export default {
  name: 'verbal-4',
  data() {
    return {
      pdfIcon
    }
  }
}
</script>
<style lang="scss" scoped>
.pdf {
  display: flex;
  flex-direction: row;
  padding: .16rem .19rem;
  background: #F2F2F2;
  border-radius: .15rem;
  p {
    margin-left: .15rem;
    font-size: .12rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
  }
}
</style>

• 文字
  

<template>
  <div>
    <div class="content">这里是文字话术，放到这个框里框起来，框的高度UI给一个最高限制，超出时文本框高度固定，页面滑动展示更多。
      这里是文字话术，放到这个框里框。</div>
  </div>
</template>
<script>
export default {
  name: 'verbal-1',
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.content {
  font-size: .24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: .24rem .32rem;
  background: #F2F2F2;
  border-radius: .30rem;
  opacity: 0.5;
}
</style>

• 视频
  

<template>
  <div>
    <div class="pdf">
      <video controls="controls">
        <source :src="url" type="video/ogg"/>
        <source :src="url" type="video/mp4"/>
      </video>
    </div>
  </div>
</template>
<script>
import pdfIcon from '@/assets/pdfIcon.png'
export default {
  name: 'verbal-5',
  data() {
    return {
      pdfIcon,
      url: 'https://vd4.bdstatic.com/mda-mh304n94a79z30kj/fhd/cae_h264_nowatermark/1628035700152750005/mda-mh304n94a79z30kj.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1628069518-0-0-2ae19148907cf163f28f6490bb1f4370&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='
    }
  }
}
</script>
<style lang="scss" scoped>
.pdf {
  width: 5.16rem;
  height: 2.76rem;
  display: flex;
  flex-direction: row;
  video {
    width: 100%;
    height: 100%;
    border-radius: .3rem;
  }
}
</style>