···
<template>
<view class="fu-p-y-30">
<demo-desc margin="0 15px 15px">
此组件选择器用于单列、多列联动的的选择场景。
</demo-desc>
<fu-cell-group>
<block v-for="(item,index) in list" :key="index">
<fu-cell :title="item.name" rightColor="#999999" isLink @click="handleClick(index)"></fu-cell>
</block>
</fu-cell-group>
<fu-picker ref="pickerRef1" :columns="columns1" :maskClosable="false"></fu-picker>
<fu-picker ref="pickerRef2" :columns="columns2" :defaultIndex="[2]" :maskClosable="false"></fu-picker>
<fu-picker ref="pickerRef3" :columns="columns3" :maskClosable="false" @change="changeHandler3"></fu-picker>
<fu-picker ref="pickerRef4" :columns="columns4" keyName="name" :maskClosable="false" @change="changeHandler4"></fu-picker>
<fu-picker ref="pickerRef5" :columns="columns5" :maskClosable="false" title="标题太长就会显示省略..."></fu-picker>
<fu-picker ref="pickerRef6" :columns="columns6"></fu-picker>
<fu-picker ref="pickerRef7" :columns="columns7" @change="change">
<view class="fu-bg-03-02">
<view class="fu-flex fu-flex-row-between">
<view class="fu-w-120 fu-text-c fu-l-h-86 fu-color-999999" @click="pickerRef7.close()">关闭</view>
<view class="fu-w-120 fu-text-c fu-l-h-86" @tap="affirm">确定</view>
</view>
<view class="fu-m-x-30">
<fu-input placeholder="请输入关键词" height="22" shape="circle" prefixIcon="magnifier"></fu-input>
</view>
</view>
</fu-picker>
</view>
</template>
<script setup>
import { getCurrentInstance, ref, reactive, computed, onMounted } from 'vue';
import regions from './regions.json';
// data数据
const instance = getCurrentInstance();
const { $fu } = instance.appContext.config.globalProperties;
const pickerRef1 = ref();
const pickerRef2 = ref();
const pickerRef3 = ref();
const pickerRef4 = ref();
const pickerRef5 = ref();
const pickerRef6 = ref();
const pickerRef7 = ref();
const columns1 = reactive([['中国', '美国', '巴西', '日本']]);
const columns2 = reactive([['中国', '美国', '巴西', '日本']]);
const columns3 = reactive([
['中国', '美国'],
['深圳', '厦门', '上海', '拉萨']
]);
const columnData3 = reactive([
['深圳', '厦门', '上海', '拉萨'],
['得州', '华盛顿', '纽约', '阿拉斯加']
]);
let columns4Data = ref({
provinces: [], // 省
citys: [], // 市
areas: [], // 区
pickerValue: [0, 0, 0],
defaultValue: [3442, 1, 2]
});
const columns5 = reactive([['中国', '美国', '巴西', '日本']]);
const columns6 = reactive([['中国', '美国', '巴西', '日本']]);
const columns7 = reactive([['中国', '美国', '巴西', '日本']]);
let columns6Index = ref(0);
const list = ref([
{ name: '基础案例' },
{ name: '设置默认项' },
{ name: '多列联动' },
{ name: '省市区三级联动' },
{ name: '设置标题' },
{ name: '允许点击遮罩关闭' },
{ name: '插槽自定义工具栏' }
]);
// 生命周期
onMounted(() => {
getData()
});
// computed计算属性
const columns4 = computed(() => {
return [columns4Data.value.provinces, columns4Data.value.citys, columns4Data.value.areas]
});
// methods方法
const handleClick = (e) => {
console.log(pickerRef1);
instance.proxy.$refs[`pickerRef${e + 1}`].open()
};
const changeHandler3 = (e) => {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
indexs,
// 微信小程序无法将picker实例传出来,只能通过ref操作
picker = pickerRef3.value
} = e;
// 当第一列值发生变化时,变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例,变化第二列对应的选项
picker.setColumnValues(1, columnData3[index])
}
};
const changeHandler4 = (e) => {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
indexs,
// 微信小程序无法将picker实例传出来,只能通过ref操作
picker = pickerRef4.value
} = e;
if (columnIndex === 0) {
columns4Data.value.citys = columns4Data.value.provinces[index]?.children || []
columns4Data.value.areas = columns4Data.value.citys[0]?.children || []
pickerRef4.value.setIndexs([index, 0, 0],true)
} else if (columnIndex === 1) {
columns4Data.value.areas = columns4Data.value.citys[index]?.children || [];
pickerRef4.value.setIndexs(indexs, true)
}
};
const affirm = () => {
pickerRef6.value.close()
$fu.toast(`当前确认:${columns6[0][columns6Index.value]}`)
};
const change = (e) => {
columns6Index.value = e.index;
};
const getData = () => {
columns4Data.value.provinces = regions.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
handlePickValue()
};
const handlePickValue = () => {
// 设置省
columns4Data.value.pickerValue[0] = columns4Data.value.provinces.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[0]);
// 设置市
columns4Data.value.citys = columns4Data.value.provinces[columns4Data.value.pickerValue[0]]?.children || [];
columns4Data.value.pickerValue[1] = columns4Data.value.citys.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[1]);
// 设置区
columns4Data.value.areas = columns4Data.value.citys[columns4Data.value.pickerValue[1]]?.children || [];
columns4Data.value.pickerValue[2] = columns4Data.value.areas.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[2]);
// 重置下位置
pickerRef4.value.setIndexs([columns4Data.value.pickerValue[0], columns4Data.value.pickerValue[1], columns4Data.value.pickerValue[2]], true);
};
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
}
.picker-box {
background-color: #f4f4f4;
margin-top: 10px;
padding: 10px 20px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
···
1 个回复
DCloud_UNI_JBB
vue3 可以通过 ref 来获取组件实例