uniapp实现漂亮的图片弹窗

Uniapp可以通过引入第三方插件或手动编写代码来实现漂亮的图片弹窗。以下是两种实现方法：

1. 引入第三方插件：Uniapp支持引入第三方UI组件，如vant-ui、colorui等。这些UI组件中都包含了各种UI元素，其中也包括了图片弹窗。使用方便，只需按照组件文档要求引入即可。例如在vant-ui中，可以通过以下代码引入图片弹窗组件：

<van-dialog 
  title="图片弹窗" 
  :visible.sync="showImgPopup" 
  :close-on-click-modal="true"
  >
  <img class="img-popup" :src="imgUrl" mode="aspectFit"></img>
</van-dialog>

其中，`showImgPopup`控制图片弹窗是否显示，`imgUrl`为弹窗中需要展示的图片地址。

2. 编写代码实现：通过编写JS、CSS代码，可以实现自定义的图片弹窗。步骤大致为：

（1）编写弹窗容器的HTML代码

<div class="img-popup-container">
  <div class="img-popup-mask"></div>
  <img class="img-popup-content" :src="imgUrl" mode="aspectFit"></img>
</div>

其中，`imgUrl`为需要展示的图片地址。`img-popup-mask`为弹窗遮罩层，防止用户误触其他内容，`img-popup-content`为弹窗中要展示的图片。

（2）编写弹窗样式代码

.img-popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}
.img-popup-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

以上是一个简单的弹窗样式，可以根据需要进行调整。最后，通过JS代码控制弹窗的展示和隐藏。例如：

// 在data中定义showImgPopup变量，初始值为false
data() {
  return {
    showImgPopup: false,
    imgUrl: ''
  }
},
// 编写打开弹窗的方法
methods: {
  openImgPopup(url) {
    this.imgUrl = url;
    this.showImgPopup = true;
  },
  closeImgPopup() {
    this.showImgPopup = false;
  }
}

通过调用`openImgPopup`方法，即可展示图片弹窗。通过调用`closeImgPopup`方法，即可隐藏图片弹窗。