Vant 组件库（VUE）的使用 Vant滚动选择器 选择器 传值 |
您所在的位置：网站首页 › vant组件库官网 › Vant 组件库（VUE）的使用 Vant滚动选择器 选择器 传值 |
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);在页面上使用。 默认按钮效果图：
封装的子组件代码： {{currentTemp}} 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 } } } #single_picker{ display: inline-block; }父组件引用代码： 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]) }, } }; 二. 通过 CDN 引入 var Vue = window.Vue; var vant = window.vant; // 注册 Lazyload 组件 Vue.use(vant.Lazyload); // 调用函数式组件 vant.Toast('提示');
|
【本文地址】
今日新闻 |
推荐新闻 |