Vant 组件库（VUE）的使用 Vant滚动选择器 选择器 传值

在 vue- cli 项目中安装  官方文档链接

npm ( 后面内容需要在控制台终端输入)

# 通过 npm 安装
npm i vant -S

自动按需引入组件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 

# 安装插件
npm i babel-plugin-import -D

 在 vue- cli 项目中的 .babelrc 中添加配置

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

在main.js内引用Vant 组件，引入需要用的组件实现代码：

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

在页面上使用。

<van-button type="primary">默认按钮</van-button>

效果图：

把 Vant 组件封装成子组件（滚动选择器）然后在页面引用示例代码：

实现的功能：

传一个数组进入子组件，然后把子组件选择的值传递给父组件。并在父组件处理结果。

封装的子组件代码：

<template>
  <!-- 单项选择器的组件 -->
  <div id="single_picker">
    <div @click="showFn()">{{currentTemp}}</div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-picker :columns="list" @change="onChange" @confirm="confirmFn()" @cancel="cancelFn()" show-toolbar />
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        item0:'',
        currentTemp: '请选择'
      }
    },
    props:['list'],
    mounted() {
      console.log('Picker--List111111111111',this.list)
    },
    methods: {
      onChange(picker, value, index) {  // 监听改变
        this.$emit('pickerIdx',index);
        console.log(`当前值：${value}, 当前索引：${index}`)
        this.currentTemp = value;
      },
      showFn() {
        this.show = true
      },
      getValues() {
        console.log('getValues')
      },
      confirmFn() { // 确定
        this.currentTemp = this.currentTemp!='请选择' ? this.currentTemp : this.list[0];
        if(this.currentTemp=='请选择'){
          this.$emit('pickerIdx',0);
        }
        this.show = false;
      },
      cancelFn() { // 取消
        this.show = false
      }
    }
  }
</script>

<style scoped="scoped">
#single_picker{
  display: inline-block;
}
</style>

 父组件引用代码：

<template>
  <!-- 选择器引用主页 -->
  <div id="upinfo">
       <v-SinglePicker v-on:pickerIdx="county_pickerIdx" :list='countyList'></v-SinglePicker>
  </div>
</template>

<script>
  import SinglePicker from '../../components/vantUnit/SinglePicker.vue'
  export default {
    data() {
      return {
        countyList: [1,2,3,4], //这是传给子组件的只有区县名称
      };
    },
    components: {
      'v-SinglePicker': SinglePicker
    },
    mounted() {
    },
    methods: {
      // 区县选择结果---下标
      county_pickerIdx(idx) {
        console.log('子组件传给夫级的选择器的下标和结果'，idx,this.countyList[idx])
        
      },
    }
  };
</script>
<style scoped>
</style>

二. 通过 CDN 引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">

<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>

<script>
var Vue = window.Vue;
var vant = window.vant;

// 注册 Lazyload 组件
Vue.use(vant.Lazyload);

// 调用函数式组件
vant.Toast('提示');
</script>