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缩略图报错的资料请关注程序员之家其它相关文章!
相关文章
javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足
用onpropertychange,oninput事件解决onchange事件的不足,需要的朋友可以参考下。2010-11-11jQuery?v3.3.1的BUG以及解决办法(附解决方案)
这篇文章描述了我们?FineUIPro?产品?更新中遇到的一个问题,最终将问题定位到?jQuery.position()?函数,虽然jQuery的做法是依照HTML规范来的,但是?jQuery.offsetParent()?和?jQuery.position()?两个函数有冲突,并且会导致之前的jQuery插件出错,应该算是一个BUG吧2023-03-03扩展easyui.datagrid,添加数据loading遮罩效果代码
easyui可以说是轻量级的前端UI框架,更新到1.2.1支持更多的事件,方法和属性2010-11-11
最新评论