uniapp引入vant详解

小蓝 • 2024-11-18 20:01 • 编程

一、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组件时，可能会出现报错“组件递归调用超过了最大深度”。这是因为组件在引入时出现了循环依赖。解决方式是将组件改为非递归组件，如：

// 递归组件
&ltd-template&rt
  &ltd-input :value="name" @input="$emit('update:name', $event)" />
  &ltd-comInput :name="name" />
&ltd-template&rt

// 非递归组件
&ltd-template&rt
  &ltd-input :value="name" @input="$emit('update:name', $event)" />
  &ltd-comInput />
&ltd-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
    }
  }
})

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/157598.html