Vue と React を使用して展開や折りたたみなどの効果を実現する

この記事では、vue や React などのプロジェクトにおける展開、縮小、その他のエフェクトのより簡単な実装例を主に紹介します。興味のある方は参考にしてください。

この記事のタイトル vue とReact が書かれているのですが、vue や React とは関係ありませんが、html5 や css3 の基礎知識を vue と書いているのは、最近のプロジェクトで同様のエフェクトを使用して実現しているためです。それはエレガントではなく、HTML5 と CSS3 で実装された方がより完璧です。

プロジェクトケース

このプロジェクトには次の効果があります:

多くの展開と折りたたみが行われるため、最初に Vue で比較的イライラする dom 操作を使用しました。これは、 のクラス名です。親要素の toggleClass 子要素の表示と非表示を切り替えます。

このメソッドは普遍的なメソッドなので、プロジェクト内のさまざまな場所で使用されます。コードはおおよそ次のとおりです。

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

このように書くと不親切で、後のメンテナンスが困難です。最近プロジェクトをリファクタリングしたとき、これらの場所をすべてリファクタリングし、今日紹介した方法を使用しました。さらにリファクタリングのポイントについては、「Vue プロジェクトの技術ポイントのリファクタリング」の記事をクリックしてください。

html5とcss3は展開と折りたたみを実装します

コードは次のとおりです:

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

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

コードの説明

html5自体の詳細と概要は展開と折りたたみの効果です。わからない場合は、 を確認してください。

次のようにデフォルトの三角形を非表示にします:

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

詳細と概要のUI最適化

Zhang Xinxuの記事で詳細と概要を詳しく紹介しています

UIの最適化に対応して、主な側面は次のとおりです:

1. 色、非表示、位置、置換を含む小さな三角形の最適化。

2.輪郭の削除

小さな三角形の色を変更します

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

小さな三角形の位置を変更します - 右側に表示します

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

輪郭の削除

上記で使用したのは

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

これは正しいです。バリアアクセスは非常に不親切です。最適化ソリューションについては、Zhang Xinxu のアプローチを参照してください。

その他のアプリケーションの詳細と概要

1. その他のエフェクト

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

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. フローティングメニューエフェクト

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

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. 木メニュー効果

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

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>

以上は、皆さんの参考になれば幸いです。

関連記事:

vue レンダリング前の表示問題に対処する方法 (詳細なチュートリアル)

vue プロジェクトで ueditor を使用する (詳細なチュートリアル)

vue プロジェクトに noVNC リモート デスクトップを導入する手順です

以上がVue と React を使用して展開や折りたたみなどの効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。