vue中使用vue-picture-preview 图片查看器
在vue 中引入vue-picture-preview 实现图片点击查看的图片本想贴在这里插入图片描述视频来,找来找去没看到怎么贴视频,囧~ 现在贴图吧页面整体的样式图点击第一章张图片的效果点击第二图片时的效果贴完发现图片有点大,懒得去处理了,还有用到的美图来源见水印,废话不说上代码1.安装依赖cnpm install --save-picture-preview2.在main....
·
在vue 中引入vue-picture-preview 实现图片点击查看的功能
本想贴demo的效果视频,找来找去没看到怎么贴视频,囧~ 现在贴图吧
一.页面的整体效果
二、点击第一张图片的效果
三、点击第二张图片的效果
贴完发现图片有点大,懒得去处理了,就酱吧,废话不说上代码。
1.安装依赖
cnpm install --save-picture-preview
2.在main.js中引入vue-picture-preview
import vuePicturePreview from 'vue-picture-preview' //引入图片查看器
3.在main.js中调用
Vue.use(vuePicturePreview);
4.在根组件中放置
<lg-preview></lg-preview>
啰嗦几句,一定是根组件中!!!我一开始放错地方了,一直没法预览,一不小心进坑了!
我的项目根组件是App.vue,html代码如下
<template>
<div id="app">
<router-view></router-view>
<lg-preview></lg-preview>
</div>
</template>
配置完了,就可以在页面中正常使用了
1.HTML部分
<template>
<div class="img_box" >
<p>图片查看器vue-picture-preview</p>
<ul>
<li v-for="(img,index) in items">
<img v-preview="img.img_url" :src="img.img_url" :alt="img.title"
preview-title-enable="true"
preview-nav-enable="true" v-bind:style="{width:img_w}">
<p>{{img.title}}</p>
</li>
</ul>
</div>
</template>
2.JS部分
<script type="text/javascript">
export default{
data(){
return{
img_w:((((window.screen.width)/33.333)*0.94)*0.5)+'rem',
title:"图片查看器demo" ,
items:[
{
title:"图片1",
img_url:require("../../assets/images/img_1.jpg"),
},
{
title:"图片2",
img_url:require("../../assets/images/img_2.jpg"),
},
{
title:"图片3",
img_url:require("../../assets/images/img_3.jpg"),
},
{
title:"图片4",
img_url:require("../../assets/images/img_04.jpg"),
},
],
}
},
mounted:function(){
},
methods:{
},
props:{
},
}
</script>
3.CSS部分
<style type="text/css">
.img_box{
width: 100%;
overflow: auto
}
.img_box p:first-child{
line-height: 2rem;
font-size: 0.6rem;
text-align: center;
}
.img_box ul{
width: 100%;
}
.img_box li{
list-style: none;
margin-left: 2%;
overflow: hidden;
float: left;
}
li p{
line-height: 1rem;
font-size:0.5rem;
text-align: center;
}
</style>
结束,如有问题欢迎指正!还有用到的美图来源见水印。
更多推荐
已为社区贡献4条内容
所有评论(0)