https://github.com/naihe138/vue-imageview

A preview image component for Vue3
https://github.com/naihe138/vue-imageview

component images-preview js vue

Last synced: 22 days ago
JSON representation

A preview image component for Vue3

• Host: GitHub
• URL: https://github.com/naihe138/vue-imageview
• Owner: naihe138
• License: mit
• Created: 2017-04-24T11:38:39.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-12T04:48:05.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T21:48:51.454Z (7 months ago)
• Topics: component, images-preview, js, vue
• Language: Vue
• Homepage: https://naihe138.github.io/vue-imageview/index.html#/
• Size: 3.05 MB
• Stars: 32
• Watchers: 2
• Forks: 11
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# vue preview image

A preview images component for Vue3



See The Demo


## 1、Usage with Vue3

`npm install vue-imageview --save`

## 2、Using as your need

````html

]

  
点击图片进行预览

  


    

    

    

    

    

    

  

  


  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

      }

    })

  });

````

## 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 | ''