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


Posted in Javascript onAugust 23, 2017

继续学习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({
el:"#exp",

components:{


'word-v-middle':wordMiddle

}
});

这样第一步就算完成了效果图如下

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

第二步我们来给组件绑定动态的数据,我们先在组件注册的时候添加一个props方法,让组件可以接受数据,之后使用data方法来为组件添加数据

var wordMiddle = {
template:'<p class="word-v-middle"><span>{{msg}}</span></p>',

props:['data'],

data:function(){


return {



msg:this.data


};

}
};

这样我们的组件就可以接收数据并把数据绑定到内容中,实例化时的代码也要对应的改变一下

html部分

<div id="exp">
<word-v-middle :data='aaa' ></word-v-middle>
</div>

js部分

new Vue({
el:"#exp",

data:{


aaa:'hello',

},

components:{


'word-v-middle':wordMiddle

}
})

到这里单个动态数据的组件以及完成了,但项目中用到这种对齐方式的一般都是多列的块结构,所以我们再写一个多列的例子,并使用循环绑定多个数据

css部分

#example2{
width: 100%;

overflow: hidden;
}
#example2 div{

float: left;

width: 25%;
}

html部分

<div id="example2">
<div v-for='aaa in sites'>


<word-v-middle :data='aaa' ></word-v-middle>

</div>
</div>

js部分

new Vue({
el:"#example2",

data:{


sites:[




"洗发水洗发水洗发水",




"洗发水洗发水",




"洗发水洗发水洗发水洗发水洗发水",





"洗发水洗发水", 




 ]



},

components:{


'word-v-middle':wordMiddle

}
})

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

效果如上图,上述代码中,css部分是为了让代码为并列的四列,html中使用v-for方法循环数据,在组建内通过:data='aaa'接收循环输出的数据,而数据的来源是父元素实例化中的data内的名为sites的数组,在实际项目中,把sites内的数据换成后台输出的数组就可以实现后台数据的绑定。

代码还有很多不足的地方,比如想要更改上下对齐的行数还要通过修改css修改,这篇文章仅作为学习Vue的小结,供自己以后复习学习使用,有什么问题希望大家指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 控件事件小结
Oct 31 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 #Javascript
深入理解React中何时使用箭头函数
Aug 23 #Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
JS数组交集、并集、差集的示例代码
Aug 23 #Javascript
关于Vue实现组件信息的缓存问题
Aug 23 #Javascript
详解webpack进阶之loader篇
Aug 23 #Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 #Javascript
You might like
php读取目录所有文件信息dir示例
2014/03/18 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
高中生期末评语
2014/01/28 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
民族精神月活动总结
2014/08/28 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技