### 使用 `
uni-popup` 实现多级联动组件
#### 组件介绍
`
uni-popup` 是
UniApp 提供的一个弹窗组件，支持多种类型的弹出层展示。为了实现多级联动功能，通常会结合其他数据处理逻辑一起使用。
#### 创建多级联动组件
##### HTML 结构
首先，在页面中引入 `
uni-popup` 并定义触发按钮：
```html
<template>
<view class="content">
<!
-- 触发器
-->
<button type="primary" @click="open
Popup">选择地区</button>
<!
-- 多级联动
popup -->
<
uni-popup ref="
popup" type="center">
<picker
-view indicator
-style="height: 50px;" :value="currentValue" @change="bindChange">
<picker
-view
-column>
<div v
-for="(item, index) in provinceList" :key="index">{{ item }}</div>
</picker
-view
-column>
<picker
-view
-column>
<div v
-for="(item, index) in cityList" :key="index">{{ item }}</div>
</picker
-view
-column>
<picker
-view
-column>
<div v
-for="(item, index) in areaList" :key="index">{{ item }}</div>
</picker
-view
-column>
</picker
-view>
<button @click="confirmSelection">确认</button>
</
uni-popup>
</view>
</template>
```
##### JavaScript 部分
接着编写相应的 Vue.js 脚本部分来管理状态和交互行为：
```javascript
<script>
export default {
data() {
return {
currentValue: [0, 0, 0], // 默认
选中的索引数组
provinceList: ['广东省', '湖南省'], // 省份列表
cityList: [], // 城市列表 (动态加载)
areaList: [] // 地区列表 (动态加载)
}
},
methods: {
open
Popup() {
this.$refs.
popup.open()
},
bindChange(e) {
const val = e.detail.value;
this.currentValue = val;
// 动态更新城市和地区列表...
this.updateCityAndArea(val);
},
updateCityAndArea(indexes) {
let selectedProvinceIndex = indexes[0];
switch(selectedProvinceIndex){
case 0:
this.cityList=['广州市','深圳市'];
break;
case 1:
this.cityList=['长沙市','株洲市'];
break;
}
if(this.cityList.length>indexes[1]){
this.areaList=[this.cityList[indexes[1]]+'辖区A',this.cityList[indexes[1]]+'辖区B']
}else{
this.areaList=[];
}
},
confirmSelection(){
console.log('最终选择:', ...this.provinceList[this.currentValue[0]],
this.cityList[this.currentValue[1]],
this.areaList[this.currentValue[2]]);
this.$refs.
popup.close();
}
}
}
</script>
```
此代码片段展示了如何利用 `
uni-popup` 和 `picker
-view` 来构建一个多级联的选择器，并实现了基本的数据绑定与事件监听机制[^1]。
####
样式调整
可以根据实际需求自定义
样式，比如修改字体大小、背景色等，使组件更贴合应用的整体风格。
扫一扫
3621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
