Vux: Le prévisualiseur demande ceci. $refs.previewer.show n'est pas un problème de fonction dans v-for
代码如下：` <flexbox-item>
<img class="previewer-demo-img" v-for="(arr, index) in list" :src="arr.src" width="100" height="100" @click="show(index)">
<div >
<previewer :list="list" ref="previewer" :options="options"></previewer>
</div>
{{item.name}}
</flexbox-item>
</flexbox>
`
wangchaolonglls
Tous les 4 commentaires
En attendant que Dieu le résolve en ligne, le projet est pressé, la :ref="variable" dans le composant de prévisualisation a été essayée et le problème n'a pas été résolu.
wangchaolonglls
le 29 juin 2017
N'oubliez pas de formater le code la prochaine fois
<template>
<div style="background-color: #EFEFF4;">
<flexbox v-for="(item,i) in items" :key="i">
<flexbox-item>
<img :class="item.name" v-for="(arr, index) in list" :src="arr.src" width="100" height="100"
@click="show(index,i)">
<div>
<previewer :list="list" ref="previewer" :options="item.options"></previewer>
</div>
{{item.name}}
</flexbox-item>
</flexbox>
</div>
<!--<img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" height="100" @click="show(index)">-->
<!--<div v-transfer-dom>-->
<!--<previewer :list="list" ref="previewer" :options="options"></previewer>-->
<!--</div>-->
</template>
<script>
import {
Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer, TransferDom
} from 'vux'
export default{
directives: {
TransferDom
},
data () {
return {
items: [{
name: 'aaaa',
options: {
getThumbBoundsFn (index) {
// find thumbnail element
let thumbnail = document.querySelectorAll('.aaaa')[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
}
}
}, {
name: 'bbbbb',
options: {
getThumbBoundsFn (index) {
// find thumbnail element
let thumbnail = document.querySelectorAll('.bbbbb')[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
}
}
}],
list: [
{
src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg'
},
{
src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg'
}, {
src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg'
}]
}
},
components: {
Flexbox,
FlexboxItem,
XImg,
Search,
Divider,
Scroller,
Cell,
Group,
XInput,
XButton,
Previewer
},
methods: {
show (index, i) {
this.$refs.previewer[i].show(index)
}
}
}
</script>
<style lang="less">
</style>
wg5945
le 29 juin 2017
👍4
Merci, mon Dieu, j'ai aussi trouvé la cause du problème hier. J'ai compris qu'après v-for, ref est une liste. Lors de la lecture, utilisez cette méthode.$refs.previewer[i]. Merci encore à Dieu pour votre réponse active . Merci, j'ai une autre question, n'y a-t-il pas de bouton d'affichage gauche et droit lors de la prévisualisation de la version v2.4.1 ?
wangchaolonglls
le 30 juin 2017
N'oubliez pas de formater le code la prochaine fois
<template> <div style="background-color: #EFEFF4;"> <flexbox v-for="(item,i) in items" :key="i"> <flexbox-item> <img :class="item.name" v-for="(arr, index) in list" :src="arr.src" width="100" height="100" @click="show(index,i)"> <div> <previewer :list="list" ref="previewer" :options="item.options"></previewer> </div> {{item.name}} </flexbox-item> </flexbox> </div> <!--<img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" height="100" @click="show(index)">--> <!--<div v-transfer-dom>--> <!--<previewer :list="list" ref="previewer" :options="options"></previewer>--> <!--</div>--> </template> <script> import { Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer, TransferDom } from 'vux' export default{ directives: { TransferDom }, data () { return { items: [{ name: 'aaaa', options: { getThumbBoundsFn (index) { // find thumbnail element let thumbnail = document.querySelectorAll('.aaaa')[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 } } }, { name: 'bbbbb', options: { getThumbBoundsFn (index) { // find thumbnail element let thumbnail = document.querySelectorAll('.bbbbb')[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 } } }], list: [ { src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg' }, { src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg' }, { src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg' }] } }, components: { Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer }, methods: { show (index, i) { this.$refs.previewer[i].show(index) } } } </script> <style lang="less"> </style>
Bonjour, pourquoi voulez-vous écrire deux options, si j'en écris deux, l'image s'affichera deux fois
liangshuoGitHub
le 18 sept. 2018
Cette page vous a été utile?
0 / 5 - 0 notes
Questions connexes
hao-li
·
3Commentaires
GloriaCHL
·
4Commentaires
iqiuye
·
4Commentaires
hezhiwen940420
·
4Commentaires
525729985
·
4Commentaires
Commentaire le plus utile
N'oubliez pas de formater le code la prochaine fois