当前位置: 首页 > 工具软件 > tabler-icons > 使用案例 >

@element-plus/icons 显示所有图标

邢宏浚
2023-12-01
<template>
  <li v-for="name in icons">
    {{ name }}

    <el-icon style="font-size: 40px">
      <component :index="key" :key="key" :is="name"></component>
    </el-icon>
  </li>
</template>
<script>
import * as ElIcons from '@element-plus/icons'
import { reactive, ref, toRefs } from 'vue'

export default {
  name: 'Home',
  setup() {
    const getData = () => {
      console.log('页面挂载了')
      var icons = []
      for (const name in ElIcons) {
        console.error(name)
        icons.push(name)
      }
      return icons
    }

    const iconsData = reactive(getData())

    const iconList = reactive({
      icons: iconsData
    })
    const data = toRefs(iconList)

    return {
      ...data
    }
  }
}
</script>
 类似资料: