vue vant Popup 弹出层 与 Picker 选择器 的完美结合 实现多级列表选择 |
您所在的位置：网站首页 › get的搭配用法 › vue vant Popup 弹出层 与 Picker 选择器 的完美结合 实现多级列表选择 |
vue vant Popup 弹出层 与 Picker 选择器 的完美结合 实现多级列表选择
|
前言： 在写项目的时候，经常会碰到选择列表，为了更完美的实现效果，使用了vant里面的 Popup 弹出层 + Picker 选择器 效果图： van-field 是vant里面的输入框组件，这里你也可以用div代替，根据个人爱好选择 data为模拟数据，一般选择列表数据是后台返回，这里的data模拟后台返回的数据，我这里是在created()里面给columns进行赋值 Popup和 Picker根据vant里面的内容填写即可 源码： Pxh export default { data() { return { columns: [], value: "朴信惠", showPicker: false, data: [ { name: "匹诺曹" }, { name: "继承者" }, { name: "阿尔罕布拉宫的回忆" } ] }; }, computed: {}, methods: { onConfirm(value, index) { //切换账号 this.showPicker = false; this.value = value; } }, created() { this.data.map(value => { value = value.name; this.columns.push(value); }); } }; main { height: calc(100vh - 1.2rem); overflow-y: scroll; -webkit-overflow-scrolling: touch; } #home { width: 100%; height: 100vh; overflow: hidden; .content { width: 100%; padding: 0.4rem; box-sizing: border-box; .kinds { width: 90%; margin: 0.666667rem auto 0; border: 1px solid #a7a7a7; border-radius: 0.266667rem; } .text { margin: 0.666667rem 0; p { font-size: 0.4rem; line-height: 0.666667rem; } } } }van-popup 里面加了一个get-container="body"属性 详解请看上篇文章：链接: https://blog.csdn.net/pxhing/article/details/105795031. |
页面结构： 
点击切换时进行重新赋值： 
【本文地址】