uniapp引入vant詳解

一、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
    }
  }
})