uniapp 自定义点击图片放大，模糊背景

单张图片的点击放大，背景模糊，不能缩放

要点：

1. :style来动态控制filter模糊属性
2. 点击图片调用函数viewImg设置属性isBlur为true展示大图和模糊背景
3. 模糊背景和展示大图元素在同一层级而不是父子级别(父元素用fitler: blur(1);子元素也模糊)

<template>
	<--isBlur变量为true展示模糊属性否则属性为空不模糊-->
  <view class="content" :style="{filter: isBlur ? 'blur(5px)' : '',}">
  	<--初始大图隐藏，点击小图显示大图-->
  	<image src="" mode="heightFix" class="content-img" @click="viewImg"></image>
  <view>
  <--背景模糊，大图显示，点击大图后大图隐藏，背景复原不模糊-->
  <view class="viewImg" v-if="isBlur" @click="viewImg">
    <image src="xxx" mode="heightFix" class="viewImg-img"></image>
  <view>
</template>

<script>
	export default {
  	data() {
    	return {
      	isBlur: false,//是否模糊
      }
    },
    methets: {
    	viewImg() {
      	//点击就给变量赋值 this.isBlur不模糊(false)就变模糊(true)，模糊(true)就变不模糊(true)
      	this.isBlur = !this.isBlur;
      }
    }
  }

</script>

<style lang="scss" scoped>
	.viewImg{
  	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    &-img {
    	width: 110rpx*$hd;
    	height: 375rpx*$hd;
    	position: absolute;
    	top: 20%;
    	left: 50%;
    	transform: translateX(-50%);
    }
  }
</style>

点击前效果

点击后效果

点击大图后关闭大图