ビュー画像拡大効果を実現するビュー

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

この記事の例は、誰もがイメージをクリックして特定のコードを共有することです。参照するには、具体的な内容は次のとおりです

1.画像メソッド関数を実装するためのサブコンポーネントを作成する:BigImg.vue


<template>
<!- 过渡动画 ->
<transition name="fade">
   <div class="img-view" @click="bigImg">
     <!- 遮罩层 ->
     <div class="img-layer"></div>
     <div class="img">
       <img :src="imgSrc">
     </div>
  </div>
  </transition>
</template>
<script>
  export default {
    props: ['imgSrc'],//接受图片地址
    methods: {
      bigImg() {
      // 发送事件
        this.$emit('clickit')
      }
    }
  }
</script>
<style scoped>
  /*动画*/
  .fade-enter-active,
  .fade-leave-active {
    transition: all .2s linear;
    transform: translate3D(0, 0, 0);
  }
  .fade-enter,
  .fade-leave-active {
    transform: translate3D(100%, 0, 0);
  }
  /* bigimg */
  .img-view {
    position: inherit;
    width: 100%;
    height: 100%;
  }
  /*遮罩层样式*/
  .img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /*不限制图片大小,实现居中*/
  .img-view .img img {
    max-width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
  }
</style>

2.親クラスのサブコンポーネントを使用します。


<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="contents">
    <div class="group">
      <div class="special">
        <span v-text="pagedata.subtitle"></span>
      </div>
      <span class="text-muted" v-text="pagedata.headline"></span>
      <div class="group_img">
        <!- 放大图片 ->
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
  
        <div class="text" v-text="pagedata.article"></div>
        <img id="smallImg" :src="pagedata.imgurl" @click="clickImg($event)">
      </div>
    </div>
  </div>
</template>
<script>
import BigImg from '../../index/moduleStyles/BigImg.vue';
export default {
  data () {
    return {
      showImg:false,
      imgSrc: ''
    }
  },
  props: ['pagedata'],
  computed: {},
  components: { 'big-img':BigImg},
  methods: {
    clickImg(e) {
      this.showImg = true;
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src;
    },
    viewImg(){
      this.showImg = false;
    },
  },
  watch: {},
}
</script>
<style>
</style>

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ