Beispielcode des Vue-Symbolselektors

Vue von „vue“ importieren
importiere SvgIcon von '@/components/SvgIcon' // SVG-Komponente
 
// global registrieren
Vue.component('svg-icon', SvgIcon)
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
erfordernAlles(req) 

# Standardkonfiguration ersetzen
 
# multipass: true
# voll: wahr
 
Plugins:
 
  # - Name
  #
  # oder:
  # - Name: falsch
  # - Name: wahr
  #
  # oder:
  # - Name:
  # param1: 1
  # param2: 2
 
-removeAttrs:
    Attribute:
      - 'füllen'
      - 'Füllregel' 

<Vorlage>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" rel="external nofollow" />
  </svg>
</Vorlage>
 
<Skript>
// Dokument: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
importiere { isExternal } von '@/utils/validate'
 
Standard exportieren {
  Name: "SvgIcon",
  Requisiten: {
    Symbolklasse: {
      Typ: Zeichenfolge,
      erforderlich: true
    },
    Klassenname: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  },
  berechnet: {
    istExternal() {
      gibt isExternal(diese.iconClass) zurück
    },
    Symbolname() {
      gibt `#icon-${this.iconClass}` zurück
    },
    svgClass() {
      wenn (dieser.Klassenname) {
        gib 'svg-icon ' + diesen.Klassennamen zurück
      } anders {
        gib 'svg-icon' zurück
      }
    },
    styleExternalIcon() {
      zurückkehren {
        Maske: `url(${this.iconClass}) no-repeat 50% 50%`,
        „-webkit-mask“: „url(${this.iconClass}) keine Wiederholung 50 % 50 %“
      }
    }
  }
}
</Skript>
 
<Stilbereich>
.svg-Symbol {
  Breite: 1em;
  Höhe: 1em;
  vertikale Ausrichtung: -0,15em;
  füllen: aktuelle Farbe;
  Überlauf: versteckt;
}
 
.svg-external-icon {
  Hintergrundfarbe: aktuelle Farbe;
  Maskengröße: Abdeckung!wichtig;
  Anzeige: Inline-Block;
}
</Stil> 

<!-- @author zhengjie -->
<Vorlage>
  <div Klasse="Symbol-Body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="Bitte geben Sie den Symbolnamen ein" @clear="filterIcons" @input.native="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-Eingabe>
    <div Klasse="Symbolliste">
      <div v-for="(Element, Index) in Symbolliste" :Schlüssel="Index" @click="selectedIcon(Element)">
        <svg-icon:icon-class="item" style="Höhe: 30px;Breite: 16px;" />
        <span>{{ Artikel }}</span>
      </div>
    </div>
  </div>
</Vorlage>
 
<Skript>
Symbole aus „./requireIcons“ importieren
Standard exportieren {
  Name: "IconSelect",
  Daten() {
    zurückkehren {
      Name: '',
      Symbolliste: Symbole
    }
  },
  Methoden: {
    filterIcons() {
      this.iconList = Symbole
      wenn (dieser.Name) {
        diese.iconList = diese.iconList.filter(Element => Element.includes(dieser.name))
      }
    },
    ausgewähltesSymbol(Name) {
      dies.$emit('ausgewählt', Name)
      Dokument.Body.Klick()
    },
    zurücksetzen() {
      dieser.name = ''
      this.iconList = Symbole
    }
  }
}
</Skript>
 
<style rel="stylesheet/scss" lang="scss" scoped>
  .Symbol-Körper {
    Breite: 100 %;
    Polsterung: 10px;
    .Symbolliste {
      Höhe: 200px;
      Überlauf-y: scrollen;
      div {
        Höhe: 30px;
        Zeilenhöhe: 30px;
        Rand unten: -5px;
        Cursor: Zeiger;
        Breite: 33%;
        schweben: links;
      }
      Spanne {
        Anzeige: Inline-Block;
        vertikale Ausrichtung: -0,15em;
        füllen: aktuelle Farbe;
        Überlauf: versteckt;
      }
    }
  }
</Stil>