马上大学毕业了，要做毕业设计，决定做个移动端的网站，在挑选了多个Vue的移动端框架之后，返现Vant这个框架的开发文档相对还是比较友好的，所以就决定使用这个了，但是使用的途中，发现是真的好多坑，今天先来说说这个图片轮播+预览的功能

首先我先自己试了一下Vant上面给的例子，说实话，感觉例子上讲的图片预览着实没看懂怎么个意思，按照上面的说法，首先引入ImagePreview，然后直接就创建了个数组，然后就完事了，我当时的那个心情啊~
在这里插入图片描述
随后在多次实验无果的情况下，我先把swiper写了出来，在这里又遇见了个小坑，就是我使用的是swiper中的v-lazy预加载，可是每一次都给我报个错
在这里插入图片描述
这里需要注意一下哈，虽然咱们在main.js中引入了vant并且全局注册了，但是lazy是需要单独引入的（感觉有点小坑爹）
在这里插入图片描述
好，到了这里这个轮播图是没有问题了，那么这个预览怎么解决呢？在经过多次尝试（一个多小时）的实验后，抱着试一试的心理，在组件内部单独引入后，又给每一个图片添加了点击事件，利用点击事件来触发预览的这个ImagePreview函数，最后终于成功了o(╥﹏╥)o

在这里吐槽一下，我在Main.js中，引入了这个ImagePreview并且全局注册了都不管用，单独在组件中使用就可以，真是气死我了(╬◣д◢)！！ 垃圾框架，毁我时间（真香~）

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue