uni-app uni-popup 弹出层组件问题:uni-popup-dialog的mode=input时,value属性无法设置默认值

uni-app uni-popup 弹出层组件问题:uni-popup-dialog的mode=input时,value属性无法设置默认值

操作步骤:

  • 下载最新的uni-popup,使用示例代码演示。

预期结果:

  • 在uni-popup-dialog输入框中应该可以显示value的默认值

实际结果:

  • value默认值不起作用

bug描述:

<uni-popup ref="inputDialog" type="dialog">  
    <uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>  
</uni-popup>

弹窗组件,内部的输入框,value值无法正确的显示到输入框上,起不到默认值的作用。uni-popup版本1.9.0


更多关于uni-app uni-popup 弹出层组件问题:uni-popup-dialog的mode=input时,value属性无法设置默认值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

可以用v-model

更多关于uni-app uni-popup 弹出层组件问题:uni-popup-dialog的mode=input时,value属性无法设置默认值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


1.8.4版本的时候还能用value那,新版本value就不好使了

你是vue2还是vue3,新版的value直接被# ifdef vue2注释了

感谢了,v-model是可以的

您好 想问下v-model的值如何修改呀,比如我想在打开弹窗的时候进行赋值给input

回复 陈慕一: uni-popup-dialog 需要加上对 modelValue 的 watch 监听,就可以实现了

uni-app 中使用 uni-popup-dialog 组件时,如果 mode 设置为 input,默认情况下 value 属性确实无法直接设置默认值。这是因为 uni-popup-dialogvalue 属性是单向绑定的,无法直接通过 props 设置默认值。

不过,你可以通过以下方法来实现设置默认值的功能:

方法一:使用 ref$refs 动态设置默认值

  1. template 中给 uni-popup-dialog 设置 ref 属性:

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog ref="dialog" mode="input" title="输入框" placeholder="请输入内容"></uni-popup-dialog>
    </uni-popup>
    
  2. script 中通过 this.$refs.dialog.value 设置默认值:

    export default {
      methods: {
        showPopup() {
          this.$refs.popup.open();
          this.$nextTick(() => {
            this.$refs.dialog.value = '默认值';
          });
        }
      }
    }
    

方法二:使用 v-model 双向绑定

  1. template 中使用 v-model 绑定一个变量:

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog v-model="inputValue" mode="input" title="输入框" placeholder="请输入内容"></uni-popup-dialog>
    </uni-popup>
    
  2. script 中定义 inputValue 并设置默认值:

    export default {
      data() {
        return {
          inputValue: '默认值'
        };
      },
      methods: {
        showPopup() {
          this.$refs.popup.open();
        }
      }
    }
    

方法三:监听 open 事件动态设置默认值

  1. template 中监听 open 事件:

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog ref="dialog" mode="input" title="输入框" placeholder="请输入内容" @open="onDialogOpen"></uni-popup-dialog>
    </uni-popup>
    
  2. script 中定义 onDialogOpen 方法,并在该方法中设置默认值:

    export default {
      methods: {
        showPopup() {
          this.$refs.popup.open();
        },
        onDialogOpen() {
          this.$nextTick(() => {
            this.$refs.dialog.value = '默认值';
          });
        }
      }
    }
回到顶部