在 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>

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

Vant组件库封装可翻页日历组件
前言我们在进行VUE开发的时候有的时候会使用到VantUI组件库: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home#jie-shao Vant ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）
一.vue中自适应rem的设置新建文件src/libs/rem.js function setRem() {// 750px为设计稿视口宽度字体大小默认18px;const screenWidth ...
Uniapp 导入 Vant 组件库
Uniapp 导入 Vant 组件库 Vant Weapp 开发文档 Vant Weapp - 轻量.可靠的小程序 UI 组件库创建 wxcomponents 目录在 uniapp 项目的根目录下 ...
有赞Vant组件库的引入及轮播图片预览的实现
有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
用一用Vant组件库
目录一.Vant是什么? 二.小案例 2.1 准备工作 2.2 功能实现三.总结本篇文章主要讲述如何在Vue2中使用Vant2组件库,面向会Vue基础初次使用Vant组件库的对象,大概阅读时间5 ...
当在终端中用 npm 安装 Vant 组件库时，发生“npm ERR code ERESOLVE ；npm ERRERESOLVE could not resolve；”报错时，该怎么办？
出现的问题: 当在终端中用 npm 安装 Vant 组件库时,发生 npm ERR! code ERESOLVE: npm ERR! ERESOLVE could not resolve:报错时, ...

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

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

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

实现的功能：

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

二. 通过 CDN 引入

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

最新文章

热门文章

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

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

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

实现的功能：

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

二. 通过 CDN 引入

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

最新文章

热门文章

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

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

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