elementui中el-popover里面的内容怎么用html

image.png

这个属性怎么用的
我们可以看一下源码

<template>
  <span>
    <transition
      :name="transition"
      @after-enter="handleAfterEnter"
      @after-leave="handleAfterLeave">
      <div
        class="el-popover el-popper"
        :class="[popperClass, content && 'el-popover--plain']"
        ref="popper"
        v-show="!disabled && showPopper"
        :style="{ width: width + 'px' }"
        role="tooltip"
        :id="tooltipId"
        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
      >
        <div class="el-popover__title" v-if="title" v-text="title"></div>
        <slot>{{ content }}</slot>
      </div>
    </transition>
    <slot name="reference"></slot>
  </span>
</template>

其中 <slot>{{ content }}</slot>
内容可以以插槽的形式传入，所以前端可以直接在el-popover组件里写html内容

<el-popover
                placement="top-start"
                title="作者简介"
                width="400"
                trigger="hover"
              >
                <ul class="tips-content">
                  <li>昵称：webrabbit</li>
                  <li>邮箱：
                    <a
                      href="mailto:admin@websmallrabbit.com"
                      target="_blank"
                      data-toggle="tooltip"
                      rel="nofollow"
                      data-placement="bottom"
                      title=""
                      data-original-title="Email:admin@websmallrabbit.com"
                    >admin@websmallrabbit.com</a>
                  </li>
                  <li>个人网址：
                    <a href="http://websmallrabbit.github.io/" title="http://websmallrabbit.github.io/" target="_blank">http://websmallrabbit.github.io/</a>
                  </li>
                </ul>
                <span slot="reference">
                  <a class="address">webrabbit博客</a>
                </span>
              </el-popover>

显示

image.png

如果你还喜欢欢迎点赞关注 😀😀😀

image.png