Utilisez vue et réagissez pour obtenir des effets tels que l'expansion et l'effondrement

Cet article présente principalement des exemples d'implémentation plus simples d'effets d'expansion, de réduction et d'autres dans des projets tels que vue et réagir. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Avant-propos

Bien que le titre de cet article contienne vue et réagis, il n'est pas lié à vue et réagir, mais à quelques connaissances de base en html5 et css3. La raison pour laquelle j'écris vue est parce que j'ai un effet similaire. utilisé dans des projets récents. J'ai utilisé des connaissances liées à vue pour y parvenir, ce qui n'est pas élégant, mais utiliser html5 et css3 pour y parvenir est encore plus parfait.

Cas du projet

Le projet a les effets suivants :

Beaucoup s'étendent et s'effondrent, pour la mise en œuvre de cela, j'ai d'abord utilisé des opérations dom relativement frustrantes dans vue, qui est un nom de classe de l'élément parent toggleClass pour afficher et masquer les éléments enfants.

Cette méthode étant universelle, elle est utilisée à de nombreux endroits dans le projet. Le code est à peu près le suivant :

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");
 }
}

Écrit comme ceci, il est peu convivial et difficile à utiliser. maintenir plus tard. Lorsque j'ai refactorisé le projet récemment, j'ai refactorisé tous ces endroits et utilisé la méthode présentée aujourd'hui ! Pour plus de points de refactoring, veuillez cliquer sur l'article Points techniques de refactorisation du projet Vue.

html5 et css3 implémentent l'expansion et le repli

Le code est le suivant :

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

code CSS

.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;
}

Explication du code

Le détail et le résumé du HTML5 lui-même ont un effet d'expansion et de réduction. Si vous ne comprenez pas, vous pouvez vérifier.

Masquer le triangle par défaut comme suit :

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

Optimisation de l'interface utilisateur des détails et du résumé

Zhang Xinxu a un article qui présente les détails et le résumé très bien Dans le détail,

correspond à l'optimisation de son UI, qui comprend principalement les aspects suivants :

1 Optimisation des petits triangles, y compris la couleur, le masquage, la position et le remplacement.

2. Suppression du contour

Modifier la couleur du petit triangle

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

Modifier la position du petit triangle - affichage à droite

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

Suppression du contour

Ce que j'ai utilisé ci-dessus est

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

Ceci est très hostile à l'accessibilité. voir l’approche de Maître Zhang Xinxu.

détails et résumé des autres applications

1. Plus d'effets

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

code CSS

.

::-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. Effet de menu suspendu

Code CSS :

/* 隐藏默认三角 */
::-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;
}

Code HTML :

<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. effet de menu

Code CSS :

/* 隐藏默认三角 */
::-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;
}

Code HTML :

<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>

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir Utile.

Articles associés :

Comment gérer les problèmes d'affichage avant le rendu de la vue (tutoriel détaillé)

En utilisant ueditor dans le projet vue (Tutoriel détaillé)

Quelles sont les étapes pour introduire le bureau à distance noVNC dans un projet vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!