Vue使用v-tooltip组件时如何实现提示文本换行效果

直接在提示文本中写\n不生效，是因为默认渲染模式下浏览器会将普通文本中的换行符识别为普通空白字符，不会自动折行，可通过以下三种方案实现换行效果：

• 方案1：开启HTML解析，使用<br>标签换行
  v-tooltip默认关闭HTML内容解析，手动开启html配置后，即可在提示文本中用HTML换行标签实现折行：

  <button v-tooltip="{
    content: 'This is one line <br> This is another line',
    html: true
  }">功能按钮</button>
  

• 方案2：添加CSS规则解析\n换行符
  如果不想开启HTML解析权限，可通过自定义tooltip内容容器的CSS样式，让浏览器自动识别文本中的\n实现换行，无需修改原有提示文本的写法：

  .v-popper--tooltip .v-popper__inner {
    white-space: pre-line;
  }
  

  原有带\n的绑定写法无需调整即可正常展示两行效果：

  <button v-tooltip="`This is one line \n This is another line`">功能按钮</button>
  

• 方案3：使用popper插槽自定义内容
  对于复杂排版的提示内容，可直接使用组件提供的popper插槽自定义提示区的DOM结构，换行、样式调整都更灵活：

  <button v-tooltip>
    功能按钮
    <template #popper>
      <p class="tip-line">This is one line</p>
      <p class="tip-line">This is another line</p>
    </template>
  </button>
  

小提示：如果项目内所有tooltip都需要支持换行，可在v-tooltip初始化时全局开启html配置，或全局引入上述CSS规则，无需单个组件重复配置。

内容的提问来源于stack exchange，提问作者Sorin Burghiu