通过antdv组件a-modal点击图片查看大图

置顶

《独白》

于 2022-11-24 10:09:33 发布

阅读量794

点赞数

分类专栏： vue 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_45149139/article/details/128012493

版权

代码：

<template>
  <div>
    <div class="Picture_box" @click="anniu">
      <img :src="obj" alt="" />
      <div class="Mouse_over">
        <a-icon
          type="eye"
          :style="{ fontSize: '32px', color: '#fff' }"
          class="tubaio"
        ></a-icon>
      </div>
    </div>

    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="obj" />
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
      previewVisible: false,
    };
  },
  methods: {
    anniu()