el-popover 的content内容换行

阿wei程序媛2023-07-27 14:05

需求：把el-popover的content内容进行换行

复制代码

<el-popover
       placement="bottom"
       width="450"
       trigger="click"
                     >
          <div class="custom-content">
                  示例：如果您在 2 个托盘上运输 40 箱纸（每个托盘上20 箱），<br>
                  您将输入：<br/>
                  商品数量：40<br/>
                  商品单位：BOX<br/>
                  打托数量：2<br/>
                  打托类型：PALLETS<br/>
          </div>
          <i class="el-icon-question" slot="reference"></i>
</el-popover>

以上代码就能实现el-popover的content内容换行，实现效果图：

疑惑：

el-popover里面的content参数也可以通过slot传入DOM

于是我看网上很多都是这样传入的

复制代码

 <el-popover
       placement="bottom"
       width="450"
       trigger="click"
                     >
         <template slot="content">
             <div class="custom-content">
                示例：如果您在 2 个托盘上运输 40 箱纸（每个托盘上20 箱），<br>
                您将输入：<br/>
                商品数量：40<br/>
                商品单位：BOX<br/>
                打托数量：2<br/>
                打托类型：PALLETS<br/>
              </div>
         </template>
             <i class="el-icon-question" slot="reference"></i>
</el-popover>

这样写content里面的内容直接不显示了，懵圈。。。。，如果有知道的友友们，请指教。