图片缩略图插件
-
运行cnpm i vue2-preview -S 安装插件
-
导入图片缩略图插件
import VuePreview from 'vue-preview'Vue.use(VuePreview);
-
在view视图层占位
<vue-preview :slides="thumb" @close="handleClick"></vue-preview>
-
在data函数中,新建一个数组,用于存储缩略图
data(){ return{ photoInfo:{}, id:this.$route.params.id, /*存储缩略图数组*/ thumb:[] } },
-
缩略图插件需要有以下必须属性(msrc,w,h)title和alt暂且不需要
-
在获取图片缩略图数据中,要注意一点,当你的数据的数组中,属性不够时,或者只有一个属性,这个时候就要遍历数组,为数组手动添加属性
res.body.message.forEach(item=>{ item.msrc=item.src; item.w=600; item.h=400; });
-
在进行第三步时,要注意,@close="handleClick"这里的handleClick,
/*点击缩略图右上角的XX,关闭缩略图效果*/ closeHandler(){ console.log('close event') }, // 完全关闭之后,调用这个函数清理资源 destroyHandler() { console.log('destroyHandler') }
组件之间传值时,可以不用params,用js传值
-
不需要再将模块改成router-link,可以直接给元素一个点击事件,然后将你要传入的值,当作参数放进去
<div @click="goGoodsInfo(item.id)" class="goods-item" v-for="item in goodsLists" :key="item.id" >
-
在你定义的事件goGoodsInfo里面写值,有三种使用方法
goGoodsInfo(id){ //this.$route 路由参数对象 可以实现获取地址栏传入的值 //this.$router 路由导航对象 可以使用js代码实现路由的前进,后退 console.log(this.$router); /* * 使用方法 * 1,传一个参数 this.$router.push('/home/goodsInfo/'+id) * 2,创一个对象 this.$router.push({path:'/home/goodsInfo/'+id}) * 3,直接传递路由的名字,在router.js中给路由设置名字 * */ this.$router.push({name:'goodsInfo',params:{id}}) }
-
第一种方法,传参,直接写值
this.$router.push('/home/goodsInfo/'+id)
-
第二种方法,传一个对象
this.$router.push({path:'/home/goodsInfo/'+id})
-
第三种方法,直接传递路由的名字,首先要在router.js里面给路由定义一个name,然后再给路由传递,当然,也要把你要传递的参数,写出来,用params传递参数值
{path:'/home/goodsInfo/:id',component:GoodsInfo,name:'goodsInfo'}
this.$router.push({name:'goodsInfo',params:{id}})