vue-preview缩略图报错解决

 更新时间:2023年08月03日 11:51:12   作者:diuren1205  
这篇文章主要为大家介绍了vue-preview缩略图报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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缩略图报错的资料请关注程序员之家其它相关文章!

相关文章

最新评论

?


http://www.vxiaotou.com