vant 汇总

vant 使用

• 安装

用 npm 的方式引入 vant npm install vant --save

• 全局引入

import Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);

• 按需引入方法

安装 babel-plugin-import，它可以让我们按需引入组件模块

并在.babelrc 或者中配置 plugins 复制代码

"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]

• 按需使用 vant 组件

import {Row, Col} from 'vant'
Vue.use(Row).use.(Col) // main.js

vant 问题总结

1. vant 阻止 checkbox 事件冒泡触发父元素事件

van-checkbox 外包一层 span,然后加上@click.stop

<span @click.stop>
  <van-checkbox :name="report.id" @click="checkOneReport">
    <template #icon="props">
      <img
        alt
        class="img-icon mtp10"
        :src="props.checked ? activeIcon : inactiveIcon"
      />
    </template>
  </van-checkbox>
</span>

2. 重写 vant 样式

::v-deep vue 深度选择器

::v-deep .van-tab--active {
  font-size: 15px;
  font-weight: 600;
  color: rgba(9, 25, 50, 1);
}

3. 封装 van-popup 为自己的弹窗组件解决 v-moel props 单向数据流不能修改的问题。

(1)一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

v-model="show" 改为 :value="show" @input="val=>this.$emit('input',val)"

(2) 第二种方法使用 sync 语法（vue2.3+）用到了 computed 的 getter 和 setter 参考 https://blog.csdn.net/gp3098/article/details/104407980/ (opens new window)

vant 官方 bug

Toast 添加 getContainer 属性，返回上个界面，再次进入不生效（已修复）

https://github.com/youzan/vant/issues/7006 (opens new window)