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 相关文章推荐
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
通过html表格发电子邮件
2006/10/09 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
python实现中文输出的两种方法
2015/05/09 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
合作协议书
2014/04/23 职场文书
我的祖国演讲稿
2014/05/04 职场文书
好学生评语大全
2014/05/05 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
给朋友的赠语
2015/06/23 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
深入理解pytorch库的dockerfile
2022/06/10 Python