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一点特殊用法
May 28 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
Node.js Express安装与使用教程
May 11 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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实现多条件查询实例代码
2010/07/17 PHP
php常用文件操作函数汇总
2014/11/22 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python实现apahce网站日志分析示例
2014/04/02 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python从入门到精通(DAY 3)
2015/12/20 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python读取与处理netcdf数据方式
2020/02/14 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
体育教师求职信
2014/05/24 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技