Vant 组件库(VUE)的使用 Vant滚动选择器 选择器 传值
在 vue- cli 项目中安装官方文档链接npm ( 后面内容需要在控制台终端输入)# 通过 npm 安装npm i vant -S自动按需引入组件:babel-plugin-import是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式# 安装插件npm i babel-plugin-import -D在 vue-...
·
在 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>
更多推荐
已为社区贡献38条内容
所有评论(0)