vue2图片预览原生的

### 实现Vue2中图片预览功能 为了在Vue2项目中实现图片预览功能，可以采用原生JavaScript与Vue2相结合的方式。这种方式不仅能够充分利用Vue的数据绑定特性，还能借助于JavaScript处理DOM操作。 #### HTML结构设计 HTML部分定义了一个文件输入框用于选择图片以及一个容器来显示所选图片的缩略图[^2]： ```html <div id="app"> <input type="file" @change="onFileChange"/> <ul class="view"> <li v-for="(image, index) in images" :key="index"> <img :src="image.src" /> </li> </ul> </div> ``` #### CSS样式设置 对于图片样式的控制，通过CSS确保图片按照预期方式呈现。这里设置了`.view`类下的列表项尺寸、背景颜色等属性，并利用Flexbox布局使多个图片之间保持适当间距： ```css .view > li { width: 200px; height: 120px; background-color: rgba(54, 194, 35, 0.1); list-style: none; margin: 20px; position: relative; } .view > li > img { width: 100%; height: 100%; object-fit: cover; } ``` #### JavaScript逻辑编写 接下来，在Vue实例内部定义方法`onFileChange()`，该函数会在用户选择了新的图片文件时触发。此函数读取文件内容并通过创建对象URL的方式来获取临时访问路径，最后更新到数据模型中以便渲染至页面上： ```javascript new Vue({ el: '#app', data() { return { images: [] } }, methods: { onFileChange(e) { const files = e.target.files || e.dataTransfer.files; if (!files.length) return; Array.from(files).forEach(file => { let reader = new FileReader(); reader.onloadend = () => { this.images.push({ src: reader.result }); }; reader.readAsDataURL(file); }); } } }); ``` 上述代码片段展示了如何在一个简单的Vue应用里集成基本的图片上传和即时预览的功能。当用户挑选了一张或多张照片后，这些图像会立即出现在界面上供查看。 #### 扩展：全屏预览模式 如果希望进一步增强用户体验，还可以增加点击放大查看大图的效果。此时可以通过监听每一张小图上的点击事件打开一个新的覆盖层（overlay），并在其中加载原始大小版本的大图[^3]： ```css .showImg { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 1); position: fixed; z-index: 20; margin: 0 auto; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .picture { max-width: 90vw; max-height: 70vh; z-index: 22; cursor: move; position: absolute; } ``` ```javascript methods: { showLargeImage(src) { document.querySelector('.showImg').style.display = 'flex'; document.querySelector('.picture img').setAttribute('src', src); }, hideLargeImage() { document.querySelector('.showImg').style.display = 'none'; } }, mounted() { // 添加关闭弹窗的监听器 window.addEventListener('click', (event) => { if(event.target.classList.contains('showImg')){ this.hideLargeImage(); } }) } ``` 这样就完成了一个较为完整的基于Vue2框架下使用原生JS实现图片预览的小案例。