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>相关文章：
MySQL的安装过程
近期对MySQL做了一些研究。曾经主要接触的是SQL SERVER。所以，今天对该安装过程做了一些总结以及使用过程中的一些心得。并分享给大家。记得前面。分享过一篇关于数据库的几种连接方式。而本系列文章。将以对数据库的详细操作为主。 MySQL是…
一个球从100米高度自由落下，每次落地后反弹回原高度的一半； * 再落下，求在第几次之后反弹高度小于0.1米， * 并计算在这一次落地时共经过多少米？...
package com.db2;/*** 一个球从100米高度自由落下，每次落地后反弹回原高度的一半； * 再落下，求在第几次之后反弹高度小于0.1米，* 并计算在这一次落地时共经过多少米？* * author denny**/ public class Demo1 {static …
在遗传算法中出现等式约束_排序算法中的稳定性-等式的处理
在遗传算法中出现等式约束by Onel Harrison通过Onel Harrison 排序算法中的稳定性-等式的处理 (Stability in Sorting Algorithms — A Treatment of Equality) Algorithms are at the heart of computer science. Algorithms used for sorting are some of the most fundamen…
vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志
简单介绍下vConsole： vConsole是一个由微信公众平台前端团队研发的web前端开发者面板，可用于展示console日志，方便开发、调试。 使用场景1，在vue-cli 构建的项目中使用： 通过npm安装和使用: npm install vconsole -…
无参数的lambda匿名函数
lambda 语法： lambda [arg1[,arg2,arg3....argN]]:expression 1.单个参数的： g lambda x:x*2 print g(3) 结果是6 2.多个参数的： m lambda x,y,z: (x-y)*z print m(3,1,2) 结果是4 3.无参数 # 使用def定义函数的方法 def true():return Tru…
scrum项目管理_Scrum，用于初创企业（或针对该项目的任何项目）
scrum项目管理Scrum is a lightweight framework designed to help small, close-knit teams of people develop complex products.Scrum是一个轻量级框架，旨在帮助紧密联系的小型团队开发复杂的产品。 Of course, Scrum isn’t just applicable to software proje…
升级Jekyll 3.0
每一次的升级都得又一次折腾一次，jekyll也不例外 从jekyll 2.5.2 升级为jekyll 3.0.1 错误一: jekyll 3.0.1 | Error: Permission denied - bind(2) for 127.0.0.1:4000 端口被占有，打开_config.yml 在最后加上一行 port: 5001 (其它也可)问题解决 错误…
jquery学习（3）--高级选择器
自己手写的学习笔记。常规选择器： /****************学习--高级选择器（1）****************/---高级选择器：ie7层次选择器：后代选择器 ul li a $(ul li a) 获取追溯到的多个dom对象 ie6子选择器 …
h5 返回上一页并且刷新页面
window.history.go(-1) 和 window.history.back(-1) 都用了，安卓会刷新，IOS系统不刷新（IOS会读取浏览器缓存） 下面用了一种比较low的方法，但是好歹实现了。。 //home.html localStorage.setItem(homeHref,window.loc…
kotlin中的异常处理_如何使用assertFailsWith在Kotlin中测试异常
kotlin中的异常处理by Daniel Newton丹尼尔牛顿 如何使用assertFailsWith在Kotlin中测试异常 (How to test exceptions in Kotlin with assertFailsWith) I wanted to write this short post to highlight the assertFailsWith function available to Kotlin. This function m…
学习dubbo框架的问题
InputStream ： 是所有字节输入流的超类，一般使用它的子类：FileInputStream等，它能输出字节流；InputStreamReader ： 是字节流与字符流之间的桥梁，能将字节流输出为字符流，并且能为字节…
Android 控件 之 Menu 菜单
http://www.cnblogs.com/Mrs-cc/archive/2012/07/21/2603042.html 1.OptionsMenu （选项菜单）用法总结使用方法：方法一：添加菜单项：onCreateOptionsMenu（Menu menu）中添加menu.add(Menu.NONE,Men…
VUE保存页面的数据，VUE页面显示就执行某个函数，VUE页面隐藏就执行某个函数
用 VUE 默认的 keep-alive 组件实现 保存页面的数据,页面显示就执行某个函数，页面隐藏就执行某个函数实现方式： 1.在路由内设置页面是否需要缓存； 示例代码：（在需要的组件里面添加meta 对象，keepAlive属…
npm i和npm_让您的NPM套件包含Jest和Codecov☂️
npm i和npmby Carl-Johan Kihl卡尔约翰基尔(Carl-Johan Kihl) 让您的NPM套件包含Jest和Codecov☂️ (Get your NPM-package covered with Jest and Codecov ☂️) 介绍 (Introduction) Let’s talk about code coverage, and how you can do coverage reports in Jest and Cod…
分页传页数的方法
<!DOCTYPE html><html> <head> <meta charset"UTF-8"> <title></title> </head> <body> <div> <span id"num">1</span> <button id"prev">上一页</button> <…
VUE input唤起键盘 底部固定的标签被顶上去解决办法
通过输入框的失去焦点事件和点击事件，当出现键盘时把绝对定位的底部文字隐藏，失去焦点（键盘隐藏的时候）显示底部文字 解决代码 <input type"text" class"weui-input" click"input_click" blur…
unity中摄像机的控制---调整摄像机，不让他摔倒
摄像机大部分人都会控制，最明显的就是让他旋转，随着鼠标的左右上下移动而旋转，但是总是会遇到一个问题，就是转着转着就仿佛他自己摔倒了似的，其实就是它本身绕着Z轴旋转了 这样就不是我们想要的结果了 要想解决也简单&…
java正则表达式课程_通过此免费课程学习正则表达式
java正则表达式课程by Beau Carnes通过博卡恩斯 通过此免费课程学习正则表达式 (Learn Regular Expressions with this free course) “Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems.” -Jami…
Codeforces Round #370 (Div. 2)
A - Memory and Crow 这题我没看题意，看了样例猜了一下就AC了，题目好像还挺复杂的。 #include<bits/stdc.h> using namespace std; int a[100005]; int main() {int n;cin>>n;for(int i1;i<n;i) scanf("%d",&a[i]);for(int…
pat1004. Counting Leaves (30)
1004. Counting Leaves (30) 时间限制400 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, YueA family hierarchy is usually presented by a pedigree tree. Your job is to count those family members who have no child. Input Each input file contains…
css 引用字体
最近遇到个问题，页面使用的字体要用PingFangSC字体，引入方法如下： 简单介绍下PingFangSC字体： （1）苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; （2）苹方…
系统技术方案 系统构架_构架系统时应注意的事项
系统技术方案 系统构架by Ayelet Sachto通过Ayelet Sachto 架构系统时要记住的6件事 (6 Things to keep in mind when architecting a system) Architecture may sound like a “scary ” or overwhelming subject, but actually, applying logic and approaching the problem…
[LeetCode] Add Digits
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. For example: Given num 38, the process is like: 3 8 11, 1 1 2. Since 2 has only one digit, return it. 分析一：最简单的循环方法 class Solutio…
vue 点击事件执行多次
把 click 改成 click.once 就可以了 示例代码 click.once"down" 这样有一个弊端，就是事件只执行一次就不再执行了， 另一种方式，做一个定时器 //默认设置dddown为 true if(that.dddown){that.dddown falsesetTimeout(function(…
如何以及为什么使用Android Visibility Listeners
The Android UI is built up from Views, and in a regular application, there are usually several of them. To find out which View the user is currently looking at, you need to install Visibility Listeners.Android UI是从Views构建的，在常规应用程序中&…
在vue中使用Element-UI
Element-UI是一套基于Vue2.0的UI组件库，http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element-ui --save 然后在main.js中引入： import Vue from vue import ElementUI from element-ui import element-ui/lib/theme-default/in…
Flex布局教程（来源：阮一峰）
网页布局（layout）是 CSS 的一个重点应用。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo，也可以参考。 以下内容主要参考了下面两篇文…
ibatis的there is no statement named xxx in this SqlMap
报错情况如下：com.ibatis.sqlmap.client.SqlMapException: There is no statement named Control.insert-control in this SqlMap. at com.ibatis.sqlmap.engine.impl.SqlMapExecutorDelegate.getMappedStatement(SqlMapExecutorDelegate.java:231)at com.ibatis.sq…
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例by Apurav Chauhan通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Reality with JavaScript — a case study) In this experiment, I talk about how Augmented Reality with JS can be used to make learning more f…
久未更 ~ 一之 —— 关于ToolBar
很久没更博客了，索性开一个久未更 系列 > > > > > 久未更 系列一：关于ToolBar的使用(后续补充) 1 //让 ToolBar 单独使用深色主题 使得 toolbar 中元素 变为淡色 2 android:theme"style/ThemeOverlay.AppCompat.Dark.ActionBar"…