先看原始效果,我这里是用了v-html展示内容,如果是v-text则会直接显示源码(请看下面的代码)。
但是这样就会出现一个问题,内容样式很突兀(主要为字体)。因此我就想要,富文本数据源码格式只展示文字。
// 后端传给前端的内容
<h2>各位同事们</h2><p>新的一年已经到来,让我们撸起袖子,加油干吧!</p>
但是这样并不是前端需要的,原因我也说过了,相信每个前端人都能懂。我需要的是下面的:
// 前端自己整好的同时也加上了字数限制,大于多少显示省略号...
各位同事们新的一年已经到来,让我们撸起袖...
好了,代码放上(有什么不懂的欢迎留言,如果您只是一个对象可以查阅vue的计算属性。我这里是数组)。
template代码:
<view v-for="(item_Messages, index) in list_Messages" :key="index">
<text class="smallTitle">
{{contentHtml(item_Messages.content,index)}}
</text>
</view>
js代码
data() {
return {
list_Messages: [],
}
},
methods: {
contentHtml(content, index) {
// 富文本编辑器的内容如何只获得文字去掉标签
content = content.replace(/<[^>]+>/g, "");
// 在上面的基础上还去掉了换行<br/>
// content = content.replace(/<[^>]+>/g, "").replace(/(\n)/g, "");
// 请注意,我这个是自定义全局方法,用于超过字数显示省略号的...
// 之前文章有写过,下面也放上了链接,自行查看
return this.list_Messages[index].content = this.getEllipsis(content)
},
},
最终效果:
如果你们也想要:内容超出我要显示省略号(…)两种方式你看着用!
对了此处还用到了(133天前):js根据时间进行判断究竟是多少天前?多少分钟前?小于一分钟就为刚刚?时间戳也可,字符串也可
所以,各位赶紧给我点赞收藏关注三连吧!