关于previewer插件的一点问题

[563325028]

代码基本就是复制的demo上

                   <img v-for="(item, index) in co.pics" :src="item" alt="" class="pl_img previewer-demo-img" @click="show(index)">
                    <div v-transfer-dom>
                      <previewer :list="co.pics" ref="previewer" :options="options"></previewer>
                    </div>
     show(index){
       console.log(index)
       this.$refs.previewer.show(index)
        },

然后报错 _vm.show is not a function 而且console的index也不出来 如果我把图片的click换成别的名字 比如dedao 然后会报错这个 this.$refs.previewer.show is not a function 不过这样可以得到console的index 请问这个可能是什么原因导致的 我在另一个页面使用的时候就好用

[airyland]

既然 demo 没问题，可以判定你使用有问题。 vm.show 不是函数必定是你的问题，这个和组件无关。 ref.show 不是函数，说明连 ref 都没有取到，显然也是你使用有问题，而你帖的代码并不完整，把重要信息也隐藏了。

[563325028]

代码完全复制demo 然后报错这个 Cannot read property 'x' of undefined 但是我另一个页面的可以用 这个可能是因为什么？ 会是因为vux版本问题么 我vux版本只有2.0几 好使的那个页index是我自己想办法取的 不是v-for里面的 那个页代码都删掉用demo代码也不行

<style  scoped>

</style>
<template>
    <div>
    <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" @click="show(index)">
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options"></previewer>
    </div>
    </div>
</template>
<script>
 import {Previewer, TransferDom} from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Previewer
  },
  methods: {
    show (index) {
      this.$refs.previewer.show(index)
    }
  },
  data () {
    return {
      list: [{
        src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg',
        w: 800,
        h: 400
      },
      {
        src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg'
      }, {
        src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg'
      }],
      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>

[airyland]

额，你帖了新的代码，却又没有了上面说的两个问题，说实话这我也帮不了你了。

这种情况下请自行排查吧，比如 getThumbBoundsFn 这里面的各个值是否正常，非组件层面的问题和项目代码相关无法猜测也不会花时间来帮你猜。

[563325028]

嗯好的 我猜可能是因为我vux版本的问题 或者别的插件冲突了 因为demo代码在我这也跑不起来 谢谢作者了

[airyland]

也可以建个可以重现的 repo 有空帮你看看。

[ParadeTo]

@563325028 Cannot read property 'x' of undefined 的原因可能是版本不对

这个版本 180f15dfe2c6ce41a1aef32de1a29ec5c3347983 图片才可以不传入宽高

建议文档里面加入版本号说明，要不然可能误导新人

[563325028]

感谢！ 就是因为这个问题

[563325028]

我自己的不好使好想是因为我外面套了很多层v-for 拿出来就好使了

[airyland]

@ParadeTo 已更新，其实新人安装时理论上应该都是最新版本了。