Previewer 预览再删除图片控制台报错

[tz86480]

问题+步骤：使用Previewer 预览组件的时候，如果先预览一张图片，然后退出预览模式，进行删除某张图片则会报错。 vux 版本：^2.8.1。

报错截图：

代码：

  <div>
    <div class="img_box" v-for="(item, index) in list" :key="index">
      <img class="previewer-demo-img" :src="item.src" width="100" @click.stop.prevent="show(index)">
      <div class="del" @click.stop.prevent="del(index)">x</div>
    </div>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
  </div>
</template>

<script>
import { Previewer, TransferDom } from 'vux';

export default {
  directives: {
    TransferDom
  },
  components: {
    Previewer
  },
  methods: {
    logIndexChange (arg) {
      console.log(arg);
    },
    show (index) {
      this.$refs.previewer.show(index);
    },
    del (index) {
      this.list.splice(index, 1);
    }
  },
  data () {
    return {
      list: [{
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
        w: 800,
        h: 400
      },
      {
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        w: 1200,
        h: 900
      }, {
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'
      }],
      options: {
        getThumbBoundsFn (index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  }
};
</script>
<style lang="less">
  .img_box{
    position: relative;
    .del{
      position: absolute;
      top: 0;
      left: 100px;
      width: 30px;
      height: 30px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

[happydan]

这是来自1977130605邮箱的自动回复邮件。我将尽快给您回复。

[chenoh]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[eJayYoung]

问题+步骤：使用Previewer 预览组件的时候，如果先预览一张图片，然后退出预览模式，进行删除某张图片则会报错。 vux 版本：^2.8.1。

报错截图：

代码：

  <div>
    <div class="img_box" v-for="(item, index) in list" :key="index">
      <img class="previewer-demo-img" :src="item.src" width="100" @click.stop.prevent="show(index)">
      <div class="del" @click.stop.prevent="del(index)">x</div>
    </div>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
  </div>
</template>

<script>
import { Previewer, TransferDom } from 'vux';

export default {
  directives: {
    TransferDom
  },
  components: {
    Previewer
  },
  methods: {
    logIndexChange (arg) {
      console.log(arg);
    },
    show (index) {
      this.$refs.previewer.show(index);
    },
    del (index) {
      this.list.splice(index, 1);
    }
  },
  data () {
    return {
      list: [{
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
        w: 800,
        h: 400
      },
      {
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        w: 1200,
        h: 900
      }, {
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'
      }],
      options: {
        getThumbBoundsFn (index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  }
};
</script>
<style lang="less">
  .img_box{
    position: relative;
    .del{
      position: absolute;
      top: 0;
      left: 100px;
      width: 30px;
      height: 30px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

看了preview源码中也没有updateScrollOffset这个属性，感觉你的报错还是在watch image的时候业务代码产生的，或者提供一个可复现的codesandbox，uploader就是我写的，里面也用到了preview，也是可以正常退出预览后再删除的