Vue3_arco.design -- icon 組件批量渲染

參考文檔-vue3
參考文檔-arco.design
參考文檔-ruoyi

<div v-for="item of AIcons" :key="item" @click="handleClipboard(generateAIconCode(item), $event)">
  <a-tooltip placement="top">
    <template #content>
      {{ generateAIconCode(item) }}
    </template>
    <div class="icon-item">
      <functional-icons :icon="item"></functional-icons>
      <span>icon-{{ item }}</span>
    </div>
  </a-tooltip>
</div>

<script>
  import clipboard from '@/utils/clipboard'
  import AIcons from './a-icons'
  import FunctionalIcons from './FunctionalIcons'
  export default {
    name: 'Icon',
    components: { FunctionalIcons },
    setup() {
      // tooltip 提示內容
      const generateAIconCode = (symbol) => {
        return `<icon-${symbol} />`
      } 
      // 復制功能
      const handleClipboard = (text, event) => {
        clipboard(text, event)
      }
      return {
        AIcons,
        generateAIconCode,
        handleClipboard
      }
    }
  }
</script>

FunctionalIcons.vue

函數式組件進行組件渲染

<script >
  import { h, resolveDynamicComponent } from "vue"

  function Icon(props, ctx) {
    const Component = resolveDynamicComponent('icon-' + props.icon)
    return h(Component)
  }
  export default Icon
</script>

a-icon.js

將icon名字整合到文件中，並暴露出去

const AIcons = ["loop",......]
export default AIcons