vue实现点击图片加边框

可以通过给图片添加一个类来实现点击图片加边框的效果。具体步骤如下：

1. 给图片绑定一个点击事件，可以使用 `@click` 或者 `v-on:click`。

2. 在点击事件中修改图片的类，可以使用 `$event.target` 获取当前点击的图片元素，然后再使用 `classList.toggle` 来切换类。

3. 在 CSS 样式中定义一个类来实现边框效果，可以使用 `border` 属性。

示例代码：

<template>
  <div>
    <img src="https://picsum.photos/200/300" @click="toggleBorder">
  </div>
</template>

<style>
.border {
  border: 2px solid red;
}
</style>

<script>
export default {
  methods: {
    toggleBorder(event) {
      event.target.classList.toggle('border');
    }
  }
}
</script>

这样点击图片时，就可以添加或者移除 `border` 类，从而实现边框效果。

相关问题

基于vue实现图片预览功能，写出实现代码

A：

在模板中使用v-for指令，循环展示图片列表，并针对每张图片绑定事件，当用户点击图片时，调用showPreview方法展示预览窗口。

<template>
  <div>
    <div v-for="(img, index) in imageList" :key="index">
      <img :src="img.src" @click="showPreview(index)" />
    </div>
    <div v-show="showPreviewFlag" class="preview-container">
      <img :src="previewImage" />
      <span class="close-btn" @click="closePreview">×</span>
    </div>
  </div>
</template>

在脚本中定义data中的数据和方法，如图片列表、预览窗口显示标志、预览图片地址等，并实现showPreview和closePreview方法。

<script>
export default {
  data() {
    return {
      imageList: [
        { src: 'https://example.com/img/1.jpg' },
        { src: 'https://example.com/img/2.jpg' },
        { src: 'https://example.com/img/3.jpg' }
      ],
      showPreviewFlag: false,
      previewImage: ''
    }
  },
  methods: {
    showPreview(index) {
      this.previewImage = this.imageList[index].src
      this.showPreviewFlag = true
    },
    closePreview() {
      this.showPreviewFlag = false
    }
  }
}
</script>

通过CSS样式设置预览窗口的样式，如定位、宽高、边框、背景等。

<style>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-container img {
  max-width: 80%;
  max-height: 80%;
  border: 5px solid white;
  border-radius: 10px;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
</style>

antd-vue走马灯点击图片设置样式，失效

你可以尝试在点击事件中手动设置样式，例如：

<template>
  <div>
    <a-carousel v-model="currentSlide">
      <a-carousel-slide v-for="(item, index) in imgList" :key="index">
        <img :src="item.src" @click="handleClick(index)" :style="{cursor: 'pointer'}">
      </a-carousel-slide>
    </a-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      imgList: [
        { src: 'https://via.placeholder.com/150x150.png?text=Image+1' },
        { src: 'https://via.placeholder.com/150x150.png?text=Image+2' },
        { src: 'https://via.placeholder.com/150x150.png?text=Image+3' },
      ],
    };
  },
  methods: {
    handleClick(index) {
      const slides = document.querySelectorAll('.ant-carousel .slick-slide');
      slides.forEach((slide, i) => {
        if (i === index) {
          slide.style.border = '2px solid red';
        } else {
          slide.style.border = 'none';
        }
      });
    },
  },
};
</script>

在该示例中，我们给每张图片绑定了一个点击事件 `handleClick`，在点击事件中获取所有轮播图的 `slick-slide` 类元素，并手动设置样式。在这里，我们给点击的图片添加了一个红色边框，其它图片则去除边框。你可以根据需要更改样式和实现逻辑。