Vue ウィジェットのテキスト中央揃えコンポーネントの例

何ヶ月も経ち、Vueの学習を続けています

まず、コンポーネントの期待される効果を見てみましょう

上の写真は、WeChat モールの一部のスクリーンショットです。赤いボックス内の複数行と単一行のテキストが中央に配置されていることがわかります。ここで行う必要があるのは、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:{
　　　　'word-v-middle':wordMiddle
　　}
});

このように、レンダリングは最初のステップで完了します。次のようにします

2 番目のステップは、コンポーネントがデータを受け入れることができるように、コンポーネントの登録時に最初に 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パート

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

jsパート

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

単一の動的データこれでコンポーネントは完成しました。ただし、この配置方法は通常、複数列のブロック構造を持つプロジェクトで使用されるため、別の複数列の例を作成し、ループを使用して複数のデータをバインドします

csspart

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

htmlpart

<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:{　　　　
　　　　'word-v-middle':wordMiddle　　
　　　　}})

部分の効果は上の図に示されているように、CSS 部分はコードを 4 つの並列列にし、HTML でデータをループするために使用されます。ループ出力は、コンポーネント内の data='aaa' を通じて受信されます。データ、およびデータのソースは、親要素のインスタンス化内のデータ内の sites という名前の配列です。サイト内のデータをバックグラウンドによって出力された配列に置き換えることによって。

以上がVue ウィジェットのテキスト中央揃えコンポーネントの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。