> 웹 프론트엔드 > JS 튜토리얼 > Vue 위젯의 텍스트 중심 정렬 구성 요소 예

Vue 위젯의 텍스트 중심 정렬 구성 요소 예

黄舟
풀어 주다: 2017-08-23 13:34:55
원래의
2657명이 탐색했습니다.

몇 달이 지나도 계속 Vue를 배워요. 이번에는 컴포넌트 제작 과정입니다

우선 컴포넌트의 예상 효과를 살펴보겠습니다

위의 사진은 회사에서 자체적으로 운영하는 것입니다. 위챗몰의 특정 부분을 스크린샷 해보면 빨간색 박스 안의 여러 줄과 한 줄의 텍스트가 중앙에 있는 것을 볼 수 있습니다. 이제 우리가 해야 할 일은 Vue를 사용하는 것입니다. 내부의 텍스트 모듈을 재사용 가능한 구성 요소로 만듭니다.

먼저 CSS 부분을 분해합니다

css:

.word-v-middle{    
margin-bottom: 0;    
font-size: 12px;    
min-height: 31px;    
display: flex;    
align-items: center;    
justify-content: center;    
height: 31px;    
margin-top: 5px;    
color: #87878a;    
white-space: normal;}
.word-v-middle span{    
text-align: left;    
font-size: 10px;    
text-overflow: -o-ellipsis-lastline;    
overflow: hidden;    
text-overflow: ellipsis;    
display: -webkit-box;    
-webkit-line-clamp: 2;    
-webkit-box-orient: vertical;
}
로그인 후 복사

위는 텍스트를 중앙에 배치하는 CSS인 컴포넌트의 핵심 CSS입니다. 다음으로 이를 Vue 컴포넌트로 캡슐화합니다.

html 파트

<p class="word-v-middle"><span>文字内容</span></p>
로그인 후 복사

먼저 이 파트를 컴포넌트로 등록합니다. 여기서는 컴포넌트

var wordMiddle = {
  template:'<p class="word-v-middle"><span>文字内容</span></p>',
};
로그인 후 복사

의 부분 등록 방법을 사용한 다음 인스턴스화합니다.

html:

<p id="exp">
  <word-v-middle></word-v-middle>
</p>
로그인 후 복사

js:

new Vue({
  el:"#exp",
  components:{
    &#39;word-v-middle&#39;:wordMiddle
  }
});
로그인 후 복사

이런 식으로 첫 번째 단계에서 렌더링이 완료됩니다. 다음과 같이

두 번째 단계는 동적 데이터를 컴포넌트에 바인딩하는 것입니다. 먼저 컴포넌트가 데이터를 받을 수 있도록 컴포넌트 등록 시 props 메소드를 추가한 후 해당 데이터를 사용합니다. 컴포넌트에 데이터를 추가하는 방법

var wordMiddle = {
  template:&#39;<p class="word-v-middle"><span>{{msg}}</span></p>&#39;,
  props:[&#39;data&#39;],
  data:function(){
    return {
      msg:this.data
    };
  }
};
로그인 후 복사

이 방법으로 우리 컴포넌트는 데이터를 수신하고 데이터를 콘텐츠에 바인딩할 수 있습니다. 인스턴스화 중 코드도 이에 따라 변경되어야 합니다.

html part

<p id="exp">
  <word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
</p>
로그인 후 복사

js part

new Vue({
  el:"#exp",
  data:{
    aaa:&#39;hello&#39;,
  },
  components:{
    &#39;word-v-middle&#39;:wordMiddle
  }
})
로그인 후 복사

단일 동적 데이터 그러나 이 정렬 방법은 일반적으로 다중 열 블록 구조를 사용하는 프로젝트에서 사용되므로 또 다른 다중 열 예제를 작성하고 루프를 사용하여 여러 데이터를 바인딩합니다

css part

#example2{
  width: 100%;
  overflow: hidden;
}
#example2 p{
  float: left;
  width: 25%;
}
로그인 후 복사

html part

<p id="example2">
  <p v-for=&#39;aaa in sites&#39;>
    <word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
  </p>
</p>
로그인 후 복사

js

new Vue({  
el:"#example2",  
data:{    
sites:[        
"洗发水洗发水洗发水",        
"洗发水洗发水",        
"洗发水洗发水洗发水洗发水洗发水",
        "洗发水洗发水", 
       ]
    },  components:{    
    &#39;word-v-middle&#39;:wordMiddle  
    }})
로그인 후 복사

부분의 효과는 위 그림과 같습니다. CSS 부분은 html에서 데이터를 반복하기 위해 4개의 열을 병렬로 만드는 것입니다. 루프 출력은 구성 요소의 data='aaa'를 통해 수신되며, 데이터 소스는 상위 요소 인스턴스화의 데이터에 있는 sites라는 배열입니다. 사이트의 데이터를 배경에 의한 배열 출력으로 대체함으로써 달성됩니다.


위 내용은 Vue 위젯의 텍스트 중심 정렬 구성 요소 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿