vue组件实现文字居中对齐的方法 - CSDN文库

11 浏览量更新于2023-05-04 收藏 76KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

vue组件实现文字居中对齐的方法组件实现文字居中对齐的方法

继续学习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:

<div id="exp">

　　<word-v-middle></word-v-middle>

</div>

js:

new Vue({

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38535848

粉丝: 8
资源: 926

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈