明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

uni-popup-dialog mode="input" 打开时如何修改input的值

Posted on 2025-03-07 08:22  且行且思  阅读(88)  评论(0)    收藏  举报

如题,vue3下打开弹窗时,没法修改v-model绑定的值

uni-popup-dialog的源码中 input的值是在组件触发created时赋值的 也就导致了input只会赋值一次 后面无法通过动态修改 你看下uni-popup-dialog源码就明白了
可以动态控制uni-popup-dialog的显示和隐藏 来触发组件内的created方法 然后让你修改的值显示出来

 

<template>  
    <view class="">  
        <view>  
            <button type="primary" @click="showPopup"><text>输入对话框</text></button>  
            <uni-popup @change="popupChange" ref="inputDialog" type="dialog">  
                <uni-popup-dialog v-if="isShowDialog" mode="input" title="输入内容" v-model="text"   
                    placeholder="请输入内容"></uni-popup-dialog>  
            </uni-popup>  
        </view>  
    </view>  
</template>  

<script setup>  
    import { ref } from 'vue';  
    const inputDialog = ref()  
    const isShowDialog = ref(false)  
    const text = ref('111')  
    const showPopup = () => {  
        inputDialog.value.open()  
        text.value = '222'  
    }  
    const popupChange = (val) => {  
        isShowDialog.value = val.show  
    }  
</script>