一、uniapp引入vant组件
引入vant组件可以快速实现一些常用的功能,如下拉刷新、轮播图、列表项等。引入方式有两种:一种是官方推荐的按需引入方式,另一种是直接引入全部组件。
按需引入方式:
// 引入需要使用的组件
import { Button, Row, Col } from 'vant'
// 注册组件
export default {
components: {
[Button.name]: Button,
[Row.name]: Row,
[Col.name]: Col
}
}
全部引入方式:
// 引入全部组件
import Vant from 'vant'
import 'vant/lib/index.css'
// 注册全部组件
Vue.use(Vant)
注意,使用全部引入方式会增加打包体积,建议按需引入。
二、uniapp引入vant(H5端)
H5端引入vant,需要在main.js引入vant,如下:
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
然后在需要使用vant组件的地方引入组件即可。
三、uniapp引入vant报错
1、uniapp引入vant报错递归组件
在使用vant组件时,可能会出现报错“组件递归调用超过了最大深度”。这是因为组件在引入时出现了循环依赖。解决方式是将组件改为非递归组件,如:
// 递归组件
<d-template&rt
<d-input :value="name" @input="$emit('update:name', $event)" />
<d-comInput :name="name" />
<d-template&rt
// 非递归组件
<d-template&rt
<d-input :value="name" @input="$emit('update:name', $event)" />
<d-comInput />
<d-template&rt
2、uniapp引入vantui
在引入vant组件时,需要注意vant的版本和uniapp的版本兼容性。如果使用的是uniapp 3.x版本,应该使用vantui的2.x版本。
3、uniapp引入vant后复选框报错
在使用vant组件时,可能会出现复选框无法选中的问题。这是因为vant的样式覆盖了uniapp的样式,解决方式是将样式的优先级提高,如:
.van-checkbox__icon {
z-index: 10 !important;
}
四、uniapp引入vantweapp
在uniapp中引入vantweapp时,需要在uni.scss文件中引入vantweapp的样式,如下:
// 引入vantweapp的样式
@import "@/uni_modules/vant-weapp/common/style/index.wxss";
// 引入uni.scss的其他样式
@import "@/uni.scss";
五、uniapp引入vant路径报错
在使用vant组件时,可能会出现路径报错的问题,解决方式是将路径改为相对路径,如:
import { Button } from '../../uni_modules/vant-weapp/components/button'
六、uniapp引入vant全局挂载组件
将vant组件挂载为全局组件,可以在任何页面使用该组件,如下:
// 引入需要使用的组件
import { Button } from 'vant'
// 全局注册组件
Component({
vant: {
components: {
[Button.name]: Button
}
}
})