实现后台富文本框编辑，模拟移动端效果

最新推荐文章于 2025-03-14 20:28:44 发布

qq_42794520

最新推荐文章于 2025-03-14 20:28:44 发布

阅读量1k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_42794520/article/details/105423140

版权

本文介绍如何在Vue中使用v-html指令显示富文本内容，并详细讲解了如何通过CSS控制div元素内的滚动条和整体样式，实现美观的富文本展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以上是类似的功能（富文本的编辑上篇博客已近有讲，这是主要是讲的是显示）

显示的话就比较简单就是在一个div里面使用v-html即可（Vue指令）

<div v-html="content" class='phone-text'></div>

关键是控制在div中的样式

.phone-text::-webkit-scrollbar{

width:0;   //将滚动条隐藏不显示

}

.phone-text{
    overflow-y:auto;   //内容长度超过触发这个y的滚动条
    height: 640px;
    width: 320px;
    border: red solid 1px;
    position: absolute;
    top: 90px;
    left: 30px;
    background-size:contain;
}```
基本实现就是以上这样