Zusammenfassung einiger kleinerer Probleme von Element Plus

Die erste ist die Benachrichtigungskomponente „Benachrichtigung“. Diese Komponente wurde ursprünglich je nach Fall auf der offiziellen Website eingeführt und verwendet, es wurde jedoch kein erwartetes Ergebnis angezeigt. Das Beispiel auf der offiziellen Website lautet wie folgt:

<script lang="ts" setup>
import { ElNotification } from 'element-plus'
const open1 = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}
</script>

Nach der Einführung hat sich die Struktur der Seite nicht geändert. Später, nachdem ich über den vorherigen Artikel nachgedacht hatte, stellte ich ein Problem fest. Es sollte sein, dass die Beziehung zwischen den Komponenten nicht korrekt eingeführt wurde. Ich habe die Installationsschritte auf der offiziellen Website überprüft wieder und Hinweise gefunden. Vollständiger Import

npm i unplugin-element-plus -D

Führen Sie zunächst diesen Befehl aus, um das Plugin zu installieren. Wenn Sie v3+ts verwenden, fügen Sie diese in die Datei vite.config.ts ein

import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

Importieren Sie es dann gemäß dem offiziellen Website-Fall.

Die zweite Komponente ist die Karussell-Rotationslaterne

Dazu gibt es zwei Links- und Rechtspfeile zum Umschalten, aber manchmal möchten wir ein benutzerdefiniertes Symbol verwenden. Wie verwendet man es?

Die offizielle Website definiert zwei Methoden, nämlich prev und next. Eine besteht darin, die vorherige zu wechseln, die andere darin, die nächste zu wechseln. Wir verwenden diese beiden Methoden und fügen dem linken Pfeil das Klickereignis prev und dem rechten Pfeil next hinzu Starten Sie dann unseren eigenen Definitionsschalter

Der Beispielcode lautet wie folgt

import {ref} from "vue"
const banner=ref()

function prev(){
    banner.value.prev()
}

function next(){
    banner.value.next()
}

Auf diese Weise können Sie das Umschaltsymbol anpassen

Exkurs: Wie kann man die Auswirkungen der Bildlaufleiste beseitigen?

wir können einstellen

margin-right: calc(100% - 100vw);

100vw ist die Breite des Browsers, einschließlich der Breite der Bildlaufleiste, 100 % ist die verfügbare Breite, ohne die Breite der Bildlaufleiste. Wenn die Seite keine Bildlaufleiste hat, ist sie margin-right: 0, und wenn vorhanden ist eine Bildlaufleiste, sie hat den rechten Rand: -17 Pixel, der Inhalt wird um 17 Pixel nach rechts erweitert (die Breite der Bildlaufleiste).

Der ursprüngliche Stil kann sich jedoch auf diese Weise ändern. Sie können Folgendes verwenden: root. Die spezifische Implementierung lautet wie folgt

:root {
  overflow-y: auto;
  overflow-x: hidden;
}
 
:root body {
  position: absolute;
}
 
body {
  width: 100vw;
  overflow: hidden;