html使用组件:
<div class="cell photo" @click.stop="imagesPreview(img.url)" :style=" 'background-image: url('+ img.url +') " ></div>
<van-image-preview v-model="show" :images="images1" v-myOn:click="fn"></van-image-preview>
js使用自定义指令:
export default {
name: "",
data() {
return {
images1: [],
show: false,
};
},
directives: {
myOn: {
bind(el, binding, vnode) {
const event = binding.arg;
const fn = binding.value;
el.addEventListener(event, fn);
},
},
},
methods: {
fn() {
this.show = false;
}
imagesPreview(img) {
this.images1 = [img];
this.show = true;
},
}
}