demo 原始链接:https://vux.li/demos/v2/#/component/previewer
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <img class=\"previewer-demo-img\" v-for=\"(item, index) in list\" :src=\"item.src\" width=\"100\" @click=\"show(index)\">\n <div v-transfer-dom>\n <previewer :list=\"list\" ref=\"previewer\" :options=\"options\" @on-index-change=\"logIndexChange\"></previewer>\n </div>\n </div>\n</template>\n\n<script>\nimport { Previewer, TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n Previewer\n },\n methods: {\n logIndexChange (arg) {\n console.log(arg)\n },\n show (index) {\n this.$refs.previewer.show(index)\n }\n },\n data () {\n return {\n list: [{\n msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',\n src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',\n w: 800,\n h: 400\n },\n {\n msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',\n src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',\n w: 1200,\n h: 900\n }, {\n msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',\n src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'\n }],\n options: {\n getThumbBoundsFn (index) {\n // find thumbnail element\n let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]\n // get window scroll Y\n let pageYScroll = window.pageYOffset || document.documentElement.scrollTop\n // optionally get horizontal scroll\n // get position of element relative to viewport\n let rect = thumbnail.getBoundingClientRect()\n // w = width\n return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}\n // Good guide on how to get element coordinates:\n // http://javascript.info/tutorial/coordinates\n }\n }\n }\n }\n}\n</script>\n\n\n
\n