[JavaScript知识库]uniapp预览一张本地图片组件封装

代码比较简单，为了方便以后copy用，存一下

调用

      <preview-local-pictures :img="require('../static/images/exampleImg.jpg')" @close="showPreview(false)" :show="previewFlag"></preview-local-pictures>

组件内容

<!-- 预览本地图片组件-->
<template>
  <view class="preview-local-pictures" @click="close" v-if="show">
    <img :src="img" alt="" srcset=""></img>
  </view>
</template>

<script>
export default {
  name: "previewLocalPictures",
  props: {
    // 展示
    show: {
      type: Boolean,
      default: false
    },
    // 图片地址
    img: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 关闭弹窗
    close(){
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.preview-local-pictures {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation:fadenum 0.5s;

  @keyframes fadenum {
    0%{opacity: 0;}
    100%{opacity: 1;}
  }
}

</style>

?

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖