fusions
fusions
  • 发布:2025-08-24 21:19
  • 更新:2025-08-25 15:32
  • 阅读:32

vue3编译到支付宝小程序无法通过instance.proxy.$refs获取到组件实例?

分类:uni-app

···
<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>
···

2025-08-24 21:19 负责人:DCloud_UNI_JBB 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

vue3 可以通过 ref 来获取组件实例

要回复问题请先登录注册