집 >웹 프론트엔드 >JS 튜토리얼 >Vue 및 React를 사용하여 확장 및 축소와 같은 효과 달성

Vue 및 React를 사용하여 확장 및 축소와 같은 효과 달성

亚连원래의: 2018-06-05 16:26:433059검색

이 기사는 주로 vue 및 React와 같은 프로젝트에서 확장, 축소 및 기타 효과의 간단한 구현 예를 소개합니다. 관심 있는 친구는 이를 참고할 수 있습니다.

서문

이 기사의 제목은 vue 및 React가 쓰여 있는데, Vue와 React와는 관련이 없지만 html5와 css3에 대한 몇 가지 기본 지식이 있습니다. vue로 작성된 이유는 최근 프로젝트에서 비슷한 효과를 달성하기 위해 vue 관련 지식을 사용했기 때문입니다. 우아하지도 않고 HTML5, CSS3로 구현하면 더 완벽합니다.

프로젝트 사례

이 프로젝트에는 다음과 같은 효과가 있습니다.

이를 구현하기 위해 처음에는 Vue에서 상대적으로 실망스러운 DOM 작업을 사용했습니다. 상위 요소 토글클래스 하위 요소를 표시하고 숨깁니다.

이 방법은 보편적인 방법이기 때문에 프로젝트의 여러 곳에서 사용됩니다. 코드는 대략 다음과 같습니다.

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: &#39;&#39;;
  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;

맞습니다. Barrier 접근은 매우 불친절합니다. 최적화 솔루션의 경우 Zhang Xinxu의 접근 방식을 살펴볼 수 있습니다.

다른 애플리케이션의 세부 정보 및 요약

1. 추가 효과

<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: &#39;收起&#39;;
  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: &#39;&#39;;
  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: &#39;&#39;;
  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 및 React를 사용하여 확장 및 축소와 같은 효과 달성

관련 기사