uni-app中关于添加缩进后，使用mp-html导出后缩进的样式无效的问题

发布于 1周前 作者 vueper 来自 Uni-App

uni-app中关于添加缩进后，使用mp-html导出后缩进的样式无效的问题

原因：插件在添加缩进的时候是给标签添加了 ql-indent-缩进数 的类，这个类 mp-html 不认识，所以让 mp-html 认识就行了。

解决：在 mp-html 的插件源码中，文件路径为 uni_modules->mp-html->components->mp-html->node->node.vue 文件最底下加上样式代码：

@for $i from 1 through 10 {  
  .ql-indent-#{$i} {  
    margin-left: #{$i * 2}rem;  
  }  
}

代码解释：创建 10 个 ql-indent-1 到 ql-indent-10 的类，给上左边距为索引 2 倍的 rem 距离。（一个 tab 缩进按 2 个单位算）

注：写 app.vue 全局样式里貌似没用，mp-html 还是不认识，得写它里面


Harmonyos Next教程
1 回复

在uni-app中使用mp-html插件导出内容时，确实可能会遇到缩进样式（如文本缩进）无效的问题。这通常是由于mp-html插件在渲染HTML内容时，没有正确解析或应用CSS样式导致的。为了解决这个问题，我们可以尝试以下几种方法，主要通过内联样式或特定的HTML标签来实现缩进效果。

方法一：使用HTML的<blockquote>标签

<blockquote>标签通常用于表示引用内容，并且浏览器默认会为其添加缩进。虽然这不是最灵活的方法，但在某些简单场景下可能足够。

<template>
  <view>
    <mp-html :html="contentWithIndentation"></mp-html>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentWithIndentation: `
        <p>This is a normal paragraph.</p>
        <blockquote>This is an indented paragraph using blockquote.</blockquote>
      `
    };
  }
};
</script>

方法二：使用内联样式

为了确保样式被正确应用，可以直接在HTML内容中使用内联样式来设置缩进。

<template>
  <view>
    <mp-html :html="contentWithIndentation"></mp-html>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentWithIndentation: `
        <p>This is a normal paragraph.</p>
        <p style="text-indent: 2em;">This is an indented paragraph using inline style.</p>
      `
    };
  }
};
</script>

方法三：使用CSS类并通过JavaScript动态注入样式

如果mp-html支持通过JavaScript动态注入样式，可以尝试定义一个CSS类，并在HTML中使用该类。然后，在组件挂载时动态注入该样式。

<template>
  <view>
    <mp-html :html="contentWithIndentation" :css="customStyles"></mp-html>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentWithIndentation: `
        <p>This is a normal paragraph.</p>
        <p class="indented">This is an indented paragraph using CSS class.</p>
      `,
      customStyles: `
        .indented {
          text-indent: 2em;
        }
      `
    };
  }
};
</script>

注意：上述mp-html组件的:css属性是假设的，实际使用时需确认mp-html插件是否支持通过属性传入CSS样式。如果不支持，可能需要考虑其他方式，如在页面加载时通过JavaScript动态添加<style>标签到DOM中。

以上方法提供了在不同场景下实现文本缩进的解决方案，希望对你有所帮助。

回到顶部