Renderer 渲染器 ​

<template>
  <el-renderer :renderer="renderMsg" :data="types" />
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ElButton, ElSpace } from 'element-plus'

const types = ['primary', 'success', 'info', 'warning', 'danger']

const renderMsg = (data) =>
  h(
    ElSpace,
    {
      size: 16,
    },
    {
      default: () =>
        data.map((type) => h(ElButton, { type }, { default: () => type })),
    }
  )
</script>

<template>
  <el-preview-file :file-list="fileList">
    <template #default="{ meta }">
      <el-renderer :renderer="() => renderItem(meta)" />
    </template>
  </el-preview-file>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ElIcon } from 'element-plus'

const fileList = [
  {
    name: 'excel-file.xlsx',
    size: 111111,
  },
  {
    name: 'word-file.docx',
    size: 222222,
  },
  {
    name: 'image-file.png',
    size: 333333,
  },
  {
    name: 'pdf-file.pdf',
    size: 444444,
  },
  {
    name: 'ppt-file.pptx',
    size: 555555,
  },
  {
    name: 'zip-file.zip',
    size: 888888,
  },
  {
    name: 'markdown-file.md',
    size: 999999,
  },
  {
    name: 'yarn.lock',
    size: 999999,
  },
]

const renderItem = (meta) => {
  return h(
    ElIcon,
    {
      size: 48,
      color: meta.iconColor,
    },
    {
      default: () => h(meta.icon),
    }
  )
}
</script>

<template>
  <el-renderer v-slot="{ msg }" :data="{ msg: `${msg1} ${msg2}` }">
    <div>{{ msg }}</div>
  </el-renderer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const msg1 = ref('hello')
const msg2 = ref('world')
</script>