在封装模态框组件的时候,遇到一个问题,
1、模态框的显示与隐藏是由父组件传递过来的visible控制,在模态框上使用默认的v-mode,使用计算属性缓存visible这个属性值,,当模态框组件改变了这个值,会报:[Vue warn]: Computed property “showModal” was assigned to but it has no setter.然后再设置set方法,会导致栈溢出。

<a-modal v-model="showModal"
           :title="title"
           okText="确定"
           cancelText="取消"
           @cancel="handleOk"
           @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>

<script>
   props: {
    visible: {
      type: Boolean,
      default: false
    }
  computed: {
    showModal: {
      get() {
        return this.visible
      },
      set(val) {
        this.showModal = val
      }
    }
  }
  </script>

2、当把属性值放到data中,也会有问题,模态框直接不显示了。
解决办法:
不在模态框组件上使用v-model,而是使用动态绑定的visible属性

 <a-modal :visible="visible"
           :title="title"
           okText="确定"
           cancelText="取消"
           @cancel="handleOk"
           @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
Logo

前往低代码交流专区

更多推荐