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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
php 操作符与控制结构
2012/03/07 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
浅说js变量
2011/05/25 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
pip命令无法使用的解决方法
2018/06/12 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python如何快速生成时间戳
2020/07/21 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
消防安全汇报材料
2014/02/08 职场文书
给领导的检讨书
2014/02/16 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
2014年标准化工作总结
2014/12/17 职场文书
股东大会通知
2015/04/24 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
采购部年度工作总结
2015/08/13 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android