Home > Web Front-end > JS Tutorial > Examples of text center alignment components in vue widgets

Examples of text center alignment components in vue widgets

黄舟
Release: 2017-08-23 13:34:55
Original
2657 people have browsed it

After many months, I continue to learn Vue. This time it is the production process of a component

Let us first take a look at the expectations of the component Effect

The picture above is a screenshot of a certain part of a WeChat mall operated by the company. You can see that there is a lot of text in the red box. Rows and single lines are centered and aligned. What we have to do now is to use Vue to make the text module inside into a reusable component.

First we take down the css part

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;
}
Copy after login

The top is the core css of the component, which is the css that centers the text up and down , then we first encapsulate it into a Vue component

html part

<p class="word-v-middle"><span>文字内容</span></p>
Copy after login

We first register this part as a component, here we use the local registration method of the component

var wordMiddle = {
  template:'<p class="word-v-middle"><span>文字内容</span></p>',
};
Copy after login

After instantiation

html:

<p id="exp">
  <word-v-middle></word-v-middle>
</p>
Copy after login

js:

new Vue({
  el:"#exp",
  components:{
    &#39;word-v-middle&#39;:wordMiddle
  }
});
Copy after login

In this way, even if the first step is completed, the rendering is as follows

The second step is to bind dynamic data to the component. We first add a props method when the component is registered so that the component can accept data, and then use the data method to add data to the component

var wordMiddle = {
  template:&#39;<p class="word-v-middle"><span>{{msg}}</span></p>&#39;,
  props:[&#39;data&#39;],
  data:function(){
    return {
      msg:this.data
    };
  }
};
Copy after login

In this way, our component can receive data and bind the data to the content. The code during instantiation should also be changed accordingly

html part

<p id="exp">
  <word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
</p>
Copy after login

js part

new Vue({
  el:"#exp",
  data:{
    aaa:&#39;hello&#39;,
  },
  components:{
    &#39;word-v-middle&#39;:wordMiddle
  }
})
Copy after login

The single dynamic data component is now complete, but this alignment method is generally used in projects with multi-column block structures, so we will write another multi-column example and use a loop. Bind multiple data

css part

#example2{
  width: 100%;
  overflow: hidden;
}
#example2 p{
  float: left;
  width: 25%;
}
Copy after login

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>
Copy after login

js part

new Vue({  
el:"#example2",  
data:{    
sites:[        
"洗发水洗发水洗发水",        
"洗发水洗发水",        
"洗发水洗发水洗发水洗发水洗发水",
        "洗发水洗发水", 
       ]
    },  components:{    
    &#39;word-v-middle&#39;:wordMiddle  
    }})
Copy after login

The effect is as shown above , in the above code, the css part is to make the code into four parallel columns. The v-for method is used in html to loop data, and the data output by the loop is received through: data='aaa' in the component, and the source of the data is the parent element The array named sites in the data being instantiated. In the actual project, the binding of the background data can be achieved by replacing the data in the sites with the array output by the background.


The above is the detailed content of Examples of text center alignment components in vue widgets. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template