Verwenden Sie Vue und reagieren Sie, um Effekte wie Erweiterung und Zusammenbruch zu erzielen

In diesem Artikel werden hauptsächlich einfachere Implementierungsbeispiele für Erweiterung, Reduzierung und andere Effekte in Projekten wie Vue und React vorgestellt. Interessierte Freunde können darauf verweisen

Vorwort

Obwohl der Titel dieses Artikels Vue und React enthält, bezieht er sich nicht auf Vue und React, sondern auf einige Grundkenntnisse von HTML5 und CSS3. Der Grund, warum ich Vue schreibe, ist, dass ich einen ähnlichen Effekt hatte In jüngsten Projekten habe ich Vue-bezogenes Wissen verwendet, was nicht elegant ist, aber die Verwendung von HTML5 und CSS3 ist noch perfekter.

Projektfall

Das Projekt hat folgende Auswirkungen:

Viele werden für die Umsetzung erweitert und zusammengebrochen Aus diesem Grund habe ich zunächst einige relativ frustrierende Dom-Operationen in Vue verwendet, bei denen es sich um einen Klassennamen des übergeordneten Elements toggleClass handelt, um untergeordnete Elemente anzuzeigen und auszublenden.

Da es sich bei dieser Methode um eine universelle Methode handelt, wird sie an vielen Stellen im Projekt verwendet. Der Code lautet ungefähr wie folgt:

toggleShow() {
 let target = window.event.srcElement;
 if (target.nodeName == "SPAN") {
  target.parentNode.parentNode.classList.toggle("toggleclass");
  target.classList.toggle("el-icon-arrow-right");
 } else {
  target.parentNode.classList.toggle("toggleclass");
  target.children[0].classList.toggle("el-icon-arrow-right");
 }
}

So geschrieben ist es unfreundlich und später schwer zu warten . Als ich das Projekt kürzlich umgestaltet habe, habe ich alle diese Stellen umgestaltet und die heute eingeführte Methode verwendet! Für weitere Refactoring-Punkte klicken Sie bitte auf den Artikel Refactoring Technical Points of Vue Project.

HTML5 und CSS3 implementieren Erweitern und Reduzieren

Der Code lautet wie folgt:

<details class="haorooms" open>
  <summary>图表参数</summary>
  <content>这里是包含的p等其他展示元素</content>
</details>

CSS-Code

.haorooms{position:relative}
.haorooms summary{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
}
/* 自定义的三角 */
.haorooms summary::after {
  content: '';
  position: absolute;
  left:0;
  top:0;
  width: 15px; height: 15px;
  background: url(./haorooms.png) no-repeat; /* 自定义的三角图片 */
  background-size: 100% 100%;
  transition: transform .2s;
}
.haorooms:not([open]) summary::after {
  transform: rotate(90deg);  
}
/* 隐藏默认三角 */
.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

Code-Erklärung

Die Details und die Zusammenfassung von HTML5 selbst haben einen Erweiterungs- und Reduzierungseffekt. Wenn Sie es nicht verstehen, können Sie es überprüfen.

Verstecken Sie das Standarddreieck wie folgt:

.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

UI-Optimierung von Details und Zusammenfassung

Zhang Xinxu hat einen Artikel, der Details und Zusammenfassung im Detail vorstellt

Entsprechend der Optimierung der Benutzeroberfläche sind die Hauptaspekte wie folgt:

1. Optimierung kleiner Dreiecke, einschließlich Farbe, Ausblenden, Position und Ersetzung.
2. Umrissentfernung

Ändern Sie die Farbe des kleinen Dreiecks

.haorooms ::-webkit-details-marker {
  color: gray;
}
.haorooms ::-moz-list-bullet {
  color: gray;
}

Ändern Sie die Position des kleinen Dreiecks - Anzeige rechts

.haorooms summary {
  width: -moz-fit-content;
  width: fit-content;
  direction: rtl;
}
.haorooms ::-webkit-details-marker {
  direction: ltr;
}
.haorooms ::-moz-list-bullet {
  direction: ltr;
}

Umrissentfernung

Was ich oben verwendet habe, ist

-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;

, was für Optimierungslösungen sehr unfreundlich ist Ansatz von Meister Zhang Xinxu.

Details und Zusammenfassung anderer Anwendungen

1. Weitere Effekte

<details>
  <summary>
    <p>测试内容测试内容</p>
    <p class="more">
      <p>haorooms测试内容测试内容...</p>
    </p>
    <a>更多</a>
  </summary> 
</details>

CSS-Code

::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
summary {
  user-select: none;
  outline: 0;
}
.more {
  display: none;
}
[open] .more {
  display: block;
}
[open] summary a {
  font-size: 0;
}
[open] summary a::before {
  content: '收起';
  font-size: 14px;
}

2. Schwebender Menüeffekt

CSS-Code:

/* 隐藏默认三角 */
::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
summary {
  display: inline-block;
  padding: 5px 28px;
  text-indent: -15px;
  user-select: none;
  position: relative;
  z-index: 1;
}
summary::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  margin: 4px 0 0 .5ch;
  background: url(./arrow-on.svg) no-repeat;
  background-size: 100% 100%;
  transition: transform .2s;
}
[open] summary,
summary:hover {
  background-color: #fff;
  box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
}
[open] summary::after {
  transform: rotate(180deg);
}
.box {
  position: absolute;
  border: 1px solid #ddd;
  background-color: #fff;
  min-width: 100px;
  padding: 5px 0;
  margin-top: -1px;
}
.box a {
  display: block;
  padding: 5px 10px;
  color: inherit;
}
.box a:hover {
  background-color: #f0f0f0;
}
.box sup {
  position: absolute;
  color: #cd0000;
  font-size: 12px;
  margin-top: -.25em;
}

HTML-Code:

<p class="bar">
  <details>
    <summary>我的消息</summary> 
    <p class="box">
      <a href>我的回答<sup>12</sup></a>
      <a href>我的私信</a>
      <a href>未评价订单<sup>2</sup></a>
      <a href>我的关注</a>
    </p>
  </details>
</p>
<p>这里放一段文字表明上面的是悬浮效果。</p>

3. Baummenüeffekt

CSS-Code:

/* 隐藏默认三角 */
::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
details {
  padding-left: 20px;
}
summary::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid #999;
  background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;
  background-size: 2px 10px, 10px 2px;
  vertical-align: -2px;
  margin-right: 6px;
  margin-left: -20px;
}
[open] > summary::before {
  background: linear-gradient(to right, #999, #999) no-repeat center;
  background-size: 10px 2px;
}

HTML-Code:

<details>
  <summary>我的视频</summary>
  <details>
    <summary>爆肝工程师的异世界狂想曲</summary>
    <p>tv1-720p.mp4</p>
    <p>tv2-720p.mp4</p>
    ...
    <p>tv10-720p.mp4</p>
  </details>
  <details>
    <summary>七大罪</summary>
    <p>七大罪B站00合集.mp4</p>
  </details>
  <p>珍藏动漫网盘地址.txt</p>
  <p>我们的小美好.mp4</p>
</details>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So gehen Sie mit Anzeigeproblemen vor dem Vue-Rendering um (ausführliches Tutorial)

Durch die Verwendung von ueditor im Vue-Projekt (Ausführliches Tutorial)

Was sind die Schritte, um einen noVNC-Remotedesktop in ein Vue-Projekt einzuführen

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue und reagieren Sie, um Effekte wie Erweiterung und Zusammenbruch zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!