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 相关文章推荐
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
深入浅出webpack之externals的使用
Dec 04 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
js实现下拉框二级联动
Dec 04 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
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的中问验证码
2006/11/25 PHP
PHP生成树的方法
2015/07/28 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
vue实现标签云效果的示例
2020/11/09 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python中装饰器的一个妙用
2015/02/08 Python
利用python求相邻数的方法示例
2017/08/18 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python语音识别实践之百度语音API
2018/08/30 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Python 多线程之threading 模块的使用
2021/04/14 Python
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
详解MySQL中的pid与socket
2021/06/15 MySQL