| | |
| | | mode="aspectFit" |
| | | :lazyLoad="true" |
| | | v-for="(img, index) of imgList" |
| | | :src="img.thumb" |
| | | :src="loadFail[index] ? img.org : img.thumb" |
| | | :key="index" |
| | | @tap="evt => $preview({ current: img.org, urls: imgs })" |
| | | @error="evt => handleLoadError(index)" |
| | | /> |
| | | </view> |
| | | </template> |
| | |
| | | }, |
| | | }, |
| | | data() { |
| | | return {}; |
| | | return { |
| | | loadFail: [], |
| | | }; |
| | | }, |
| | | computed: { |
| | | imgList() { |
| | | return this.imgs.map(img => ({ |
| | | return this.imgs.map((img, index) => ({ |
| | | org: img, |
| | | thumb: this.useThumb |
| | | ? img.replace(/(.*?)(\.(png|jpg|jpeg|gif))$/, '$1_thumb$2') |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | handleLoadError(index) { |
| | | while (this.loadFail.length - 1 < index) { |
| | | this.loadFail.push(false); |
| | | } |
| | | this.loadFail.splice(index, 1, true); |
| | | }, |
| | | // option { current, urls } |
| | | $preview(option) { |
| | | // 网页模式下,增加缩放操作 |