3.1.9 • Published 2 years ago
vue-imageview v3.1.9
vue preview image
A preview images component for Vue3
1、Usage with Vue3
npm install vue-imageview --save
2、Using as your need
]<template>
<h1>点击图片进行预览</h1>
<div id="imgBox">
<img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164644.jpg" alt="">
<img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164639.webp" alt="">
<img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164640.jpeg" alt="">
<img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164641.jpeg" alt="">
<img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164642.jpeg" alt="">
<img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164643.jpeg" alt="">
</div>
<ImagesView v-model:visible="show" :images="srcArr" :src="imgSrc" />
</template>
<script setup lang="ts">
import ImagesView from './components/index';
import { ref, onMounted } from 'vue'
const show = ref(false)
const srcArr = ref([])
const imgSrc = ref('');
const getData = (imgBox: HTMLDivElement) => {
const imgs = imgBox.querySelectorAll('img');
srcArr.value = Array.from(imgs).map((el) => el.src);
}
onMounted(() => {
const imgBox: HTMLDivElement = document.querySelector('#imgBox');
getData(imgBox);
imgBox.addEventListener('click', (e: any) => {
if(e.target.nodeName == 'IMG') {
imgSrc.value = e.target.src;
show.value = true
}
})
});
</script>
Attributes
Attribute | Description | require | Type | Default |
---|---|---|---|---|
visible | show/hide picker | yes | Boolean | false |
images | images data for components src1, src2 | yes | Array | [] |
src | show current images link | yes | String | '' |
3.1.3
2 years ago
3.1.2
2 years ago
3.1.7
2 years ago
3.1.6
2 years ago
3.1.5
2 years ago
3.1.4
2 years ago
3.1.9
2 years ago
3.1.8
2 years ago
2.1.1
3 years ago
2.0.2
3 years ago
2.1.0
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago