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 设计模式 推荐
Oct 28 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
redux-saga 初识和使用
Mar 10 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
原生JS实现飞机大战小游戏
Jun 09 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中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
JS模拟多线程
2007/02/07 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python 的类、继承和多态详解
2017/07/16 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python版大富翁源代码分享
2018/11/19 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
部门主管竞聘书
2015/09/15 职场文书
高一英语教学反思
2016/03/03 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记