vue-preview实现缩略图踩坑记录：Property or method “$preview“ is not defined 用不了、无法修改图片样式

H_xiang_xiang

于 2021-06-26 20:57:01 发布

阅读量801

点赞数 2

分类专栏：前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/H_xiang_xiang/article/details/118254130

版权

在使用vue-preview插件实现缩略图功能时遇到问题，包括"$preview"未定义的报错和无法修改缩略图样式。报错是因为插件更新了写法，通过正确配置在.vue组件中解决了"$preview"问题。针对样式修改，由于使用了scoped，常规方法无效。解决方案是利用/deep/深度选择器穿透作用域，修改第三方组件的样式。

摘要由CSDN通过智能技术生成

文章目录

基本配置

1、下载

npm i vue-preview -S

2、在index.js中引入并安装

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

3、如果是按照早几年的视频教学方法，会在页面中引入以下标签

<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">

然后报错↓。

Property or method “$preview” is not defined 报错

报错详细信息：Property or method “$preview” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components