vue框架一些注意事项(2)

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

图片缩略图插件

  1. 运行cnpm i vue2-preview -S 安装插件

  2. 导入图片缩略图插件

    import VuePreview from 'vue-preview'Vue.use(VuePreview);

  3. 在view视图层占位

    <vue-preview :slides="thumb" @close="handleClick"></vue-preview>
  4. 在data函数中,新建一个数组,用于存储缩略图

    data(){
        return{
            photoInfo:{},
            id:this.$route.params.id,
            /*存储缩略图数组*/
            thumb:[]
        }
    },
  5. 缩略图插件需要有以下必须属性(msrc,w,h)title和alt暂且不需要

  6. 在获取图片缩略图数据中,要注意一点,当你的数据的数组中,属性不够时,或者只有一个属性,这个时候就要遍历数组,为数组手动添加属性

    res.body.message.forEach(item=>{
        item.msrc=item.src;
        item.w=600;
        item.h=400;
    });
  7. 在进行第三步时,要注意,@close="handleClick"这里的handleClick,

    /*点击缩略图右上角的XX,关闭缩略图效果*/
                closeHandler(){
                    console.log('close event')
                },
                // 完全关闭之后,调用这个函数清理资源
                destroyHandler() {
                    console.log('destroyHandler')
                }

组件之间传值时,可以不用params,用js传值

  1. 不需要再将模块改成router-link,可以直接给元素一个点击事件,然后将你要传入的值,当作参数放进去

    <div @click="goGoodsInfo(item.id)" class="goods-item"
                 v-for="item in goodsLists"
                 :key="item.id"
    >
  2. 在你定义的事件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}})
    }
  3. 第一种方法,传参,直接写值

    this.$router.push('/home/goodsInfo/'+id)

  4. 第二种方法,传一个对象

    this.$router.push({path:'/home/goodsInfo/'+id})

  5. 第三种方法,直接传递路由的名字,首先要在router.js里面给路由定义一个name,然后再给路由传递,当然,也要把你要传递的参数,写出来,用params传递参数值

    {path:'/home/goodsInfo/:id',component:GoodsInfo,name:'goodsInfo'}

    this.$router.push({name:'goodsInfo',params:{id}})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值