标签 vant 下的文章

木灵鱼儿 1年前 vue 项目实战

解决vite开发时使用vant自动引入组件导致的二次构建

前言当我在vite中使用vant的自动引入组件后，在开发时会经常碰到以下提示：17:33:46 [vite] ✨ new dependencies optimized: vant/es/button/style/index 17:33:46 [vite] ✨ optimized dependencies changed. reloading 然后页面就会刷新，特别难受，去了解了一下为什么会这样？为了防止在启动时占用大量编译时间，vit...

3139 182 1

vant vite 自动加载

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

木灵鱼儿 1年前 vue 项目实战

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

最近碰到一个巨奇葩的问题，项目中采用了unplugin-vue-components，但是vant的组件引入又是import手动按需引入，加上一些很奇怪的配置，导致项目配置变得复杂了，于是抽空将项目的配置全部梳理了一遍，并将import手动按需去除，全部采用自动引入的方式，通过分析打包后的包体，可以看到减少了100kb左右的大小，效果非常可观。但是问题也出在这了，当我使用自动引入的时候，vant的Dialog组件出现了问题，表现为：当我通过组件的形式使用时，弹窗会自动打开，显示还有问题，但是查看v-model:show变量是false；我开始以为是样式问题，单独引入dialog样式无效，...

1386 2 0

vant 自动引入 dialog

解决vant的tab组件swipeable功能与内部scroll冲突的问题

木灵鱼儿 1年前 vue 项目实战

解决vant的tab组件swipeable功能与内部scroll冲突的问题

看了下vant的tab组件源码，当开启swipeable功能后，其实会对容器监听touch事件，这就导致我们在内容部分存在横向的滚动的时候，会导致同时触发touch事件，从而产生了冲突。解决办法就是二选一，要不在这个横向scroll的时候不触发swipeable，要不放弃swipeable。如果是第一种方案，我们需要对存在横向scroll的容器元素，做一个事件冒泡阻断，问题就解决了。<div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>

2447 28 0

vant tab swipeable

vant框架Layout布局中col元素不够宽度变形的解决办法

木灵鱼儿 4年前 vue 项目实战

vant框架Layout布局中col元素不够宽度变形的解决办法

用Layout的时候，我设置的是一行三个元素显示，但是有时候，遍历的对象可能无法满足一行三个显示，结果发现col元素会把拉伸一部分宽度。这就很尴尬了，我在使用其他框架的这种布局的时候都没遇到这种情况，没办法，只能用死办法，我给你补上几个空col了那么，如何计算需要补充几个呢？假设我们要遍历的数组名为：oneArr创建一个计算属性：fillArr() { const remainder = Math.ceil(this.indusArr.length % 3); if (remainder !== 0) { return 3 - remainder;...

5136 0 0

vant layout col

标签：vant

解决vite开发时使用vant自动引入组件导致的二次构建

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

解决vant的tab组件swipeable功能与内部scroll冲突的问题

vant框架Layout布局中col元素不够宽度变形的解决办法

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

标签：vant

解决vite开发时使用vant自动引入组件导致的二次构建

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

解决vant的tab组件swipeable功能与内部scroll冲突的问题

vant框架Layout布局中col元素不够宽度变形的解决办法

最近评论

博客文章RSS订阅

博客评论RSS订阅