el-tooltip element UI 文字提示组件悬浮显示可设置大小的图片

小张大本事

已于 2022-11-21 09:37:05 修改

阅读量2.1k

点赞数 2

文章标签： vue.js javascript elementui

于 2022-11-21 09:23:17 首次发布

本文链接：https://blog.youkuaiyun.com/shunyao6/article/details/127957876

版权

先看效果图，是想要的请无情粘贴 ~

悬浮文字商品二维码

为了做一个悬浮文字上时，直接显示二维码扫码，直接附代码啦！！！

    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <div slot="content" style="text-align: center;min-width:180px;">
        <img :src="scope.row.buy_qr_code_url"  style="width:150px;"/>
      </div>
      <div>
        商品二维码
      </div>
    </el-tooltip>

完整代码：

<el-table-column
    prop="img_url"
    width="90"
    align="center"
    label="商品二维码">
  <template slot-scope="scope">

    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <div slot="content" style="text-align: center;min-width:180px;">
        <img :src="scope.row.buy_qr_code_url"  style="width:150px;"/>
      </div>
      <div>
        商品二维码
      </div>
    </el-tooltip>

  </template>
</el-table-column>