image.png

這個(gè)屬性怎么用的
我們可以看一下源碼

<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>
內(nèi)容可以以插槽的形式傳入，所以前端可以直接在el-popover組件里寫(xiě)html內(nèi)容

<el-popover
                placement="top-start"
                title="作者簡(jiǎn)介"
                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>個(gè)人網(wǎng)址：
                    <a  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

如果你還喜歡歡迎點(diǎn)贊關(guān)注 ??????

image.png