Machen Sie es sich zur Gewohnheit, gemeinsam zu schreiben! Dies ist der N-te Tag meiner Teilnahme an der „Nuggets Daily New Plan · April Update Challenge“, klicken Sie hier, um die Details der Veranstaltung anzuzeigen .
Vorwort
Wir verwenden normalerweise einige UI-Komponentenbibliotheken im Entwicklungsprozess, insbesondere die Front-End-Studenten des Vue-Technologie-Stacks, insbesondere die Häufigkeit von Element-UI ist relativ hoch. Wir ändern häufig die Standardstile dieser UI-Komponentenbibliotheken Tiefenwähler, jeder kennt das, haben Sie sich jemals gefragt warum? Ich habe die Epidemie zu Hause ausgenutzt, recherchiert und hier geteilt
Die Mission und Rolle von scoped
Hier ist eine Demo mit vue, zwei Seiten, eine Seite ist das a-Tag von Nuggets und die andere Seite ist das a-Tag von vue, sehen wir uns gemeinsam die Rolle von scoped an, fügen Sie Rot zum a-Tag einer der Seiten hinzu. und außerdem fügt One keinen Stil hinzu und verwendet keinen bereichsbezogenen Stil, wie unten gezeigt
Jeder sollte die Antwort wissen, ja! Der Linktext auf den beiden Seiten wurde rot. Wenn wir auf die juejin-Seite klicken, führt der Browser automatisch den Stil der aktuellen Seite ein, und wenn wir auf github klicken, verwendet der Browser diesen Stil wieder, also die Farbe der Ein Link wird rot, da Vue eine Einzelseitenanwendung ist, sodass der Stil jeder Seite, die wir öffnen , in einen globalen Stil umgewandelt wird Öffnen Sie die Seite, um Unter einem Label (unten) zu sehen
Zu diesem Zeitpunkt gibt es ein weiteres data-v-xxxxxxx im a-Tag . Dies ist, was Vue für uns hinzufügt. Wenn Vue dieses Projekt erstellt, wird erwähnt, dass wir Komponenteneinheiten verwenden, und alle Elemente unter verschiedenen Komponenten werden hinzugefügt . Mit etwas Ähnlichem wie der Komponenten-ID wird die eindeutige Kennung in dem von uns geschriebenen Stil in Form eines Attributselektors gespleißt. Lassen Sie es uns überprüfen (unten).
Ja, nachdem wir Scoped hinzugefügt haben, fügt Vue dieses Attribut zum letzten Absatz dieses Stils hinzu und wählt dieses Element dann über die Attributauswahl aus, um den Elementstil zu isolieren.Als Nächstes werfen wir einen Blick auf die Nebenwirkungen von Scoped.
Nebenwirkungen von Scoped
Zu diesem Zeitpunkt führen wir element-ui ein, um die Nebenwirkungen von scoped zu überprüfen. Hier schreiben wir eine Demo (unten), und hier wird auch scoped verwendet.
Lassen Sie uns das Element überprüfen (unten)
Beachten Sie, dass das Eingabeelement hier nicht eindeutig identifiziert wird, wie z. B. data-v-xxxxxx
, aber wie sieht unser eigener Stil (my-Txt-Eingabe) aus, nachdem er erstellt wurde? (Die folgende Abbildung)
Wie in der obigen Abbildung gezeigt, wurde der von uns selbst geschriebene Stil mit diesem einzigartigen Logo gespleißt, sodass wir dieses Element nicht treffen können, egal wie wir arbeiten, was bedeutet, dass Vue dieses Logo nicht zu dieser Eingabe hinzufügt, aber es ist in unserem Dieses Logo wird dem Stil von hinzugefügt, aber wenn wir das Scoped entfernen, können wir das Ziel treffen, aber das wird nicht empfohlen, der Stil wird in einen einheitlichen Stil verpackt, das ist der Nebeneffekt von Scoped , wie können wir es dann lösen? Was ist damit? Stildurchdringung
Stilpenetration (::v-tief)
Wir fügen jetzt Style Penetration hinzu, um das Ziel zu treffen
<style scoped>
.my-Txt {
width: 200px;
}
.my-Txt ::v-deep input {
background-color: pink;
}
</style>
复制代码
Lassen Sie uns zu diesem Zeitpunkt sehen, wie der gebaute Stil Vue gehandhabt wird (unten).
Wir können sehen, dass diese eindeutige Kennung von der Rückseite der Eingabe bis zur Rückseite von my-Txt verläuft, das heißt, wenn wir diese ::v-deep nicht hinzufügen, wird Vue diese eindeutige Kennung immer im letzten Absatz spleißen des Stils, den wir schreiben, Wenn wir die Position dieses eindeutigen Bezeichners ändern möchten, müssen Sie die Stildurchdringung verwenden, um anzugeben, dass das obige Bild das Element mit diesem eindeutigen Bezeichner my-Txt bedeutet, die Eingabe in seinem untergeordneten Element gilt Dieser Stil, Und das von uns geschriebene my-Txt hat auch diese eindeutige Kennung, wie Sie aus der obigen Abbildung ersehen können
Zusammenfassen
Um das Problem der Stilisolierung in verschiedenen Komponenten in mehrseitigen Anwendungen zu lösen, führt Vue das Konzept des Bereichsstils ein, aber Vue fügt nicht allen Elementen eindeutige Kennungen hinzu, sodass wir, wenn wir dieses Element nicht treffen können, verwenden müssen Stildurchdringung, um anzugeben, in welchen Abschnitt des CSS-Stils diese eindeutige Kennung eingefügt wird! ! !
Man muss beim Lernen ruhig sein, und man muss gelehrt sein. Prostitution und Langsamkeit können den Samen nicht fördern, und Ungeduld kann die Sexualität nicht heilen. Jahre und Zeiten galoppieren, Sinn und Sonne gehen, und verwelken dann