如何使用ElementUI实现el-image大图左右切换并添加当前图片图标？-html教程-PHP中文网

如何使用ElementUI实现el-image大图左右切换并添加当前图片图标？

DDD

发布： 2025-02-23 08:32:10

原创

818人浏览过

如何使用ElementUI实现el-image大图左右切换并添加当前图片图标？

使用elementui的el-image组件实现大图左右切换及当前图片指示

ElementUI本身并不直接支持图片轮播功能，需要结合el-carousel组件来实现el-image大图的左右切换。以下代码示例展示如何使用el-carousel组件实现图片轮播，并通过CSS样式为当前显示的图片添加指示标记。

代码示例：

<code class="vue"><template>
  <el-carousel :height="400px" indicator-position="outside">
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <el-image :src="item.src" fit="scale-down">
      </el-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const images = ref([
      { src: 'https://xxx.jpg' },
      { src: 'https://xxx.jpg' },
      { src: 'https://xxx.jpg' },
    ]);

    return {
      images,
    };
  },
};
</script>

<style scoped>
.el-carousel__item.is-active::before {
  content: '✓'; /* 或其他指示标记 */
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 5px;
  border-radius: 5px;
}
</style></code>

登录后复制

这段代码创建了一个简单的图片轮播器。images数组存储图片的URL。el-carousel组件负责轮播功能，indicator-position="outside"将指示器放在轮播器外部。 CSS样式为当前激活的el-carousel-item添加一个“✓”标记，您可以将其替换为其他指示标记或图标。记得将https://xxx.jpg替换为您的实际图片URL。