Vant使用的注意事项

前言

对于Vue的前端开发工程师来说，对element-ui可能使用的更加的熟练。但是在实际的工作当中，更多的公司会使用Vant当中的一些组件。Vant是轻量、可靠的移动端Vue组件库。虽然看起来Vant对于组件的引用以及使用是很简单、容易上手的，但是在真正的开发使用当中仍然会陷入小的困惑当中，接下来主要说一下TreeSelect 分类选择分类选择器的使用注意事项。

TreeSelect的使用

**引入**

import Vue from 'vue';
import { TreeSelect } from 'vant';
Vue.use(TreeSelect);

**单选模式**

```
<van-tree-select
  :items="items"
  :active-id.sync="activeId"
  :main-active-index.sync="activeIndex"
/>
export default {
  data() {
    return {
      items,
      activeId: 1,
      activeIndex: 0
    };
  }
}

```

**多选模式**

```  
<van-tree-select
  :items="items"
  :active-id.sync="activeIds"
  :main-active-index.sync="activeIndex"
/>
export default {
  data() {
    return {
      items,
      activeIds: [1, 2],
      activeIndex: 0
    };
  }
}
```

**自定义内容**
```  
<van-tree-select
  height="55vw"
  :items="items"
  :main-active-index.sync="active"
>
  <template #content>
    <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
    <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
  </template>
</van-tree-select>
export default {
  data() {
    return {
      active: 0,
      items: [{ text: '分组 1' }, { text: '分组 2' }]
    }
  }
}
```

注意： 最使人迷惑的就是自定义的这部分，第一次使用的时候以为加了template标签就可以自己定义内容了，比如可以写一个div标签等等。但是实际上TreeSelec组件是不支持的，而且在一些特定的情况中，比如TreeSelect只支持城市的二级联动，如果这个时候想要实现三级联动应该怎么办呢？（三级联动的情况如：一级xx省级、二级xx市、三级xx区）所以想要这种情况的联动，就不要使用TreeSelect组件了！！！这个时候就可以去github上找一些是支持三级联动的啦。这个已经帮大家找了一个，可以使用github.com/ganp1020/vu…

TreeSelect样式的问题

我们在第一次使用Vant的时候，可能会遇到组件显示出来了，JS效果也是有的，但是却丢失了样式问题，其实在使用Vant组件时，对于样式的问题需要我们重新引入，也就是说对样式需要进行单独处理。

手动引入

  import Button from 'vant/lib/button';
  import 'vant/lib/button/style'

还有其他的一些方法，可以参考youzan.github.io/vant/#/zh-C…

注意： 在公司开发中对样式的使用可能需要自己去github上去找你想用组件的样式，也就是说需要自己一点一点拷贝相应的样式，这里大家可以参考github.com/youzan/vant…，找到想用的样式就OK啦！

小结

1.TreeSelect组件不支持三级联动，只支持二级。
2.TreeSelect组件无法自定义自己想要的结构问题。
3.Vant组建中的样式需要自己提前引入或者去github上找到所需的样式进行拷贝。