Examples of text center alignment components in vue widgets

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

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>

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

After instantiation

html:

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

js:

new Vue({
　　el:"#exp",
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
});

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

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>

js part

new Vue({
　　el:"#exp",
　　data:{
　　　　aaa:'hello',
　　},
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
})

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

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 part

new Vue({　　
el:"#example2",　　
data:{　　　　
sites:[　　　　　　　　
"洗发水洗发水洗发水",　　　　　　　　
"洗发水洗发水",　　　　　　　　
"洗发水洗发水洗发水洗发水洗发水",
　　　　　　　　"洗发水洗发水",　
　　　　　　　]
　　　　},　　components:{　　　　
　　　　'word-v-middle':wordMiddle　　
　　　　}})

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!