第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何通過 vue-svg-loader 在 vue.js 中導(dǎo)入多個(gè) svg

如何通過 vue-svg-loader 在 vue.js 中導(dǎo)入多個(gè) svg

梵蒂岡之花 2022-01-20 17:15:46
我想在一個(gè) vue 組件中導(dǎo)入多個(gè) svg。文檔說我必須導(dǎo)入它們中的每一個(gè)，但是如何以更短、更簡(jiǎn)潔的方式導(dǎo)入多個(gè) svg？vue-svg-loader 文檔：https : //vue-svg-loader.js.org/<script>import Info from "@/assets/svgs/info.svg";import Help from "@/assets/svgs/help.svg";import Close from "@/assets/svgs/close.svg";// etc. pp.export default {  components: {    Info,    Help,    Close  }</script>如果我想導(dǎo)入超過一百個(gè) svg 會(huì)怎樣？有什么想法可以解決這個(gè)問題嗎？
查看完整描述

1 回答

?
炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

創(chuàng)建一個(gè)基礎(chǔ)組件并在全局范圍內(nèi)注冊(cè)它，因?yàn)槟鷷?huì)非常頻繁地使用它。


創(chuàng)建一個(gè)<BaseIcon>使用requirewith 表達(dá)式為 SVG 模塊創(chuàng)建上下文的組件：


<template>

  <Component

     :is="require(`@/assets/svgs/${name}.svg`).default"

     class="BaseIcon"

     v-bind="$attrs"

     @v-on="$listeners"

  />

</template>


<script>

export default {

  name: 'BaseIcon',


  // Transparent wrapper component

  // https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance

  inheritAttrs: false,


  props: {

    name: {

      type: String,

      required: true,

    },

  },

}

</script>


<style>

 .BaseIcon {

   /* Add some default CSS declaration blocks */

 }

 </style>

注意：我們用于<Component>處理動(dòng)態(tài)組件，假設(shè)您將使用vue-svg-loader并且 SVG 被視為組件。如果不是這種情況，請(qǐng)使用<img>標(biāo)簽并使用src而不是is.


全局注冊(cè)基礎(chǔ)組件：


如果您只創(chuàng)建一個(gè)基本組件，您可以轉(zhuǎn)到您的main.js文件并在安裝應(yīng)用程序之前執(zhí)行以下操作：


import Vue from 'vue'

import BaseIcon from './components/_base/BaseIcon.vue'

import App from './App.vue'


Vue.component('BaseIcon', BaseIcon)


Vue.config.productionTip = false


new Vue({

  render: h => h(App),

}).$mount('#app')

否則，如果您想要更復(fù)雜的東西，請(qǐng)查看此樣板如何自動(dòng)注冊(cè)基本組件。


最后，像這樣使用組件：


<template>

  <div>

    <BaseIcon

      name="info"

    />

    <BaseIcon

      name="help"

    />

    <BaseIcon

      name="close"

    />

  </div>

</template>


<script>

export default {

  name: 'SomeComp',

}

</script>


查看完整回答
反對(duì) 回復(fù) 2022-01-20
  • 1 回答
  • 0 關(guān)注
  • 260 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)