vue前端开发仿钉图系列（6）左侧记事本的开发详解

　　在页面开发中，深深的被element组件所吸引，里面很多小组件都可以直接使用。像是记事本提示、记事本列表时间线、右侧编辑页面的form表单，编辑和查看状态的切换等等，比之前iOS原生开发所有的东西都要自己开发要效率不少。记事本列表主要是展示文字记录，绑定到底部某一条数据记录，里面的两个功能点一是时间线的使用，二是span标签如何实现自动换行。整理总结不易，如需全部代码，请联系我15098950589（微信同号）。和以往一样，先发一下效果图。

 

 　　记事本列表核心代码如下

<template>
<div id="box" :style="{'max-height': 525 + 'px' }" style="overflow-y:scroll;">
<ul>
<li v-for="(item,index) in datalist" :key="item.id">
<span>{{item.createTime| toDate()}}</span>
<div class="dataView">
<div class="topview">
<el-avatar :size="20" :src="define.comUrl + userInfo.headIcon"></el-avatar>
<span class="userName">{{userInfo.userName}}</span>
</div>
<div class="centerView">
<span>{{item.content}}</span>
</div>
<div class="dialog-footer">
<span style="color:#027adialog-footerff;" @click="handleEdit(item)">编辑</span>
<span style="color:#ff0000;" @click="handleDelete(index,item.id)">删除</span>
</div>
</div>
</li>
</ul>
</div>
</template>

.centerView span{
width:100%;
display: inline-block;
word-break: break-all;
word-wrap: break-word;
white-space: normal ;
}

 

 　　整理总结不易，如需全部代码，请联系我15098950589（微信同号）。