vue-preview缩略图报错解决

 更新时间:2023年08月03日 11:51:12   作者:diuren1205  
这篇文章主要为大家介绍了vue-preview缩略图报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

vue-preview

因为已经更新缩略图,使用方法已经发生转变,所以才会找不到$preview

控制台错误信息

"$preview" is not defined on the instance but referenced during render

 vue-preview(官网)

npm i vue-preview -S

main.js引用

import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)

css样式

.thumbs {
  /deep/ .my-gallery{   //deep深层作用选择器
        display: flex;
        flex-wrap:wrap;//默认换行
        figure{
            width: 30%;
            margin: 5px;
            img{
                width: 100%;
                box-shadow: 0 0 8px #999;
                border-radius: 5px;
        }
    }
}

Examples

<template>
   <div class="thumbs">
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
   </div>
</template>
<script>
export default {
    data () {
      return {
        slide1: [
          {
            src:  'https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/414.jpg?2',
            msrc: 'https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/414.jpg?2',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

实际展示

以上就是vue-preview缩略图报错解决的详细内容,更多关于vue-preview缩略图报错的资料请关注脚本之家其它相关文章!

相关文章

  • jquery imgareaselect 使用利用js与程序结合实现图片剪切

    jquery imgareaselect 使用利用js与程序结合实现图片剪切

    当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以
    2009-07-07
  • 基于jquery的cookie的用法

    基于jquery的cookie的用法

    jQuery.cookie.js是个很好的cookie插件,大概的使用方法如下,需要的朋友可以参考下。
    2011-01-01
  • JQuery触发radio或checkbox的change事件

    JQuery触发radio或checkbox的change事件

    在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下
    2012-12-12
  • HTML5+jQuery实现搜索智能匹配功能

    HTML5+jQuery实现搜索智能匹配功能

    本文主要介绍了HTML5+jquery实现的搜索匹配效果的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 利用jqgrid实现上移下移单元格功能

    利用jqgrid实现上移下移单元格功能

    这篇文章主要给大家介绍了关于如何利用jqgrid实现上移下移单元格功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 基于Jquery实现万圣节快乐特效

    基于Jquery实现万圣节快乐特效

    本文使用jquery代码实现万圣节特效,代码简单易懂,万圣节送给大家不一样的礼物,参考下本文大家也一起制作吧
    2015-11-11
  • jquery实现Ajax请求的几种常见方式总结

    jquery实现Ajax请求的几种常见方式总结

    这篇文章主要介绍了jquery实现Ajax请求的几种常见方式,结合实例形式总结分析了jQuery实现ajax请求常用的load()、post()、get()及Ajax()方法相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jQuery validate+artdialog+jquery form实现弹出表单思路详解

    jQuery validate+artdialog+jquery form实现弹出表单思路详解

    在项目需求中有这样一功能:在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证。下面小编给大家介绍通过jQuery validate+artdialog+jquery form实现弹出表单思路详解,需要的朋友参考下吧
    2016-04-04
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file控件中图片的宽高与大小

    本文通过实例代码告诉大家如何利用jQuery获取file控件中图片的宽高与大小,在我们上传之前就可以检查上传图片的大小,高度,宽度是否适合我们的要求了,下面是关于判断图片的宽高大小的代码。
    2016-08-08
  • 用jQuery解决IE不支持的option disable属性

    用jQuery解决IE不支持的option disable属性

    使用jQuery解决IE不支持的option disable属性
    2009-05-05

最新评论