vue框架一些注意事项（2）

最新推荐文章于 2022-04-14 00:37:53 发布

原创最新推荐文章于 2022-04-14 00:37:53 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue2-preview插件创建图片缩略图效果，包括安装、配置、数据绑定及事件处理等关键步骤。通过具体代码示例，详细解释了插件的使用方法和注意事项。

图片缩略图插件

运行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}})