vant使用dialog组件处理富文本内容格式问题

• 因项目使用vant组件库,有个需求是对富文本进行处理的,而dialog组件默认是可以解析富文本内容的,但是对内容样式问题,会有一个

  messageAlign:center

  会使所有内容居中,但富文本内容应自动解析是否居中或其他

• 解决方法

    <van-dialog v-model="showDialog" :title="dialogTitle" confirm-button-text="我知道了"
                  confirm-button-color="#1989fa" @confirm="turnToPage">
        <template slot="default">
          <div class="wxpDialogContentClass">
            <span class="ql-editor wxContent" v-html="wxpDialogContent"></span>
          </div>
        </template>
      </van-dialog>

  对内容进行自定义, 使用 vue-quill-editor 组件的预览,给于ql-editor样式, 但这里要注意的是:富文本内容高度很高的情况下,需要对内嵌的高度进行设置,否则滚动会产生问题.这里通过wxContent设置了高度.

• 内容布局样式

  .wxpDialogContentClass{
    padding: 10px 8px;
    word-wrap: break-word;
    font-size: 14px;
    white-space: pre-wrap;
    color: #646566;
    max-height: 60vh;
    overflow: auto;
    line-height: 20px;
  }
  
  
  .wxContent{
    display: block;
    max-height: 65vh;
    overflow: auto;
  }