vue-preview缩略图报错解决
作者：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缩略图报错的资料请关注脚本之家其它相关文章！