(vue)el-radio鼠标移入可提示图片

nyf_unknown

于 2024-04-08 10:18:27 发布

阅读量250

点赞数 2

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44754635/article/details/137496872

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

文章介绍了如何在Vue应用中使用el-radio和el-tooltip组件，当鼠标移入时显示对应的图片，以便于用户选择图表类型。

摘要由CSDN通过智能技术生成

(vue)el-radio鼠标移入可提示图片

效果：在这里插入图片描述

<el-form-item label="图表选择">
  <el-radio-group v-model="formInline.echartType">
    <el-tooltip v-for="(item, index) of echartTypeOptions" :key="index" placement="right" effect="light">
      <div slot="content"><el-image :src="testImg[index]" style="width: 100px; height: 100px" /></div>
      <el-radio :label="item.echartType">
        {{ item.name }}
      </el-radio>
    </el-tooltip>
  </el-radio-group>
</el-form-item>

testImg[index]本应该是item.img,暂代测试

testImg: [
  'https://.../zzy/2024/02/28/c1515272e3ec4a33bf67df1df248fd32.png',
  'https://.../zzy/2024/02/28/f0e73d89d73148da9fb3d080b128d605.png',
  ...
]