iview爬坑之旅——Modal点击‘确定’按钮时弹框自动关闭问题_ZD717822023的博客

方案一（自用）

利用Modal的slot,自定义写底部按钮，这样就可以避开组件内置的 @On-ok, @on-cancel；在按钮点击事件里面去做数据的验证，通过v-model控制模态框的显示与隐藏。
 <!--解决弹框自动关闭-->
 <div slot="footer">
   <Button type="text" @click="handleOnCancel">取消</Button>
   <Button type="primary" @click="handleConfirmClick">确定</Button>						
 </div>
这种情况需要手动关闭Modal，注意点击右上方关闭按钮，和点击遮罩层关闭之后的情况；
  
给Modal添加属性loading后，点击确定按钮后，对话框不会自动消失，会进入等待状态，并显示 loading 状态，需要手动关闭对话框，常用于表单提交； 
this.$refs[name].validate(async (valid) => {
   if (valid) {
     this.loading = false 
     let res= await this.fetchGet('***', {})
     if (res == null) {
       this.$Message.error('*****')
       this.loading = true 
     } else { 
       this.model = false
       this.loading = true
   } else {
     this.$Message.error('表单验证失败!');
Github关于Modal自动关闭的讨论
                    最近在做Angular项目到Vue项目重构迁移，之前Angular用的UI框架是NG-ZORRO，Vue现在用的是Iview； 但是当用Iview-modal 做表单或者条件校验时遇到了一个问题，当校验不通过时，点击确定，当校验不通过时，弹框也自动关闭了；解决方案方案一 （自用）利用Modal的slot,自定义写底部按钮，这样就可以避开组件内置的 @On-ok, @on-cancel；在按钮点击事件里面去做数据的验证，通过v-model控制模态框的显示与隐藏。 &lt;!--解决弹框自动关闭--&g
<RadioGroup v-model=formValidate.phone>
          <Radio label=phone>商家电话</Radio>
          <Radio label=leaderPhone>负责人电话</Radio>
          <span click=inputPhone()><Radio label=newPhone>输入新的电话</Radio></span>
</RadioGroup>
iview的单选按钮如果想要加点击事件，加在 RadioGroup 上和 Radio 上都不生效，这时，可以给组件外
！！！3.解决：
搜索了好多例子，有的说props属性接收的值在子组件是无法改变的，因为v-model是双向绑定当对话框状态发生该变，props的值也会改变，这样会导致报错，但是实测过后发现并无报错。
排查问题后发现原来是在父组件给子组件传值是赋值发生了问题
这个是在render函数里面写的，h,和params
在使用 iView 的 Modal 框时，需要给 Modal 框传递一个变量，用于控制显示与隐藏。然后，这个变量由父组件传递给子组件 Modal 框，每次都需要调用父组件的函数修改该变量的值，多调用了一个函数。问：只需父组件传递一个变量给 Modal 框，无需调用函数，就能显示与隐藏 Modal 框。实现如下：
Vue 2.5.2
iView 3.4.1
less 3.9.0
在 ...
				在使用iview发现点击确定的时候，他的弹层会自动关闭（默认的确定和取消 footer）
解决办法  使用slot="footer"添加一个footer，自定义确定取消的方法控制弹层的显示与隐藏。
<div slot="footer">
        <Button
          size="large"
          @click="showDialog = false"
        >取消</Button>
        <Button
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
可以使用浅拷贝，不用影响父组件状态，json.stringfy json.parse
        <div class="mask" v-if="showModal" @click="showModal=false"></div>
        <div class="pop" v-if="showModal">
          <!-- 关闭 -->
				今天遇到一个需求：
弹出的modal框中，勾选数据，在点击modal框的确定时，调用接口，如果数据返回空，关闭modal框，否则modal框不关闭，提示他重新勾选数据。
modal框有props参数 loading默认是false,就是在点击确定直接关闭modal框。如果设置loading设置为true,则点击确定不会自动关闭modal框，需要手动设置modal框的显示和隐藏。这是我又发现另一个问题，请求一次提示重新勾选数据后，modal的确定按钮为loading加载状态，无法重新勾选进行第二次请求发送，数
				遇到的问题：iview-modal在做数据校验时，点击确定，当校验不通过时，弹框也自动关闭了
解决方案：
1.给Modal添加属性loading后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。
handleSubmit(name) {
      let self = this;
      this.$refs[name].validate(...
				问题描述：在某个页面需打开一个Modal，然后这个Modal里有一个Form表单，点击确定时我需要先校验表单数据是否输入正确，不确定则不希望关闭窗口；（问题是：只要点击确认 loading :false 情况下iview默认就把窗口就关闭了）
API上也只是说了通过loading状态来手动关闭对话框，但是在需要验证form表单，表单验证通过再关闭modal 这种环境下，似乎并不实用，当首次表单验...
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
          <button @click="handleEditClick(item, $event)">编辑</button>
    </tbody>
  </table>
</template>
<script>
export default {
  methods: {
    handleEditClick(item, event) {
      event.stopPropagation();
      // 处理编辑事件，例如显示编辑框
</script>
3. 在全局的点击事件监听器中判断是否点击了编辑按钮，如果没有则隐藏编辑框。
handleGlobalClick(event) {
  const editBtn = event.target.closest('.edit-btn');
  if (!editBtn) {
    // 隐藏编辑框
4. 在编辑框中添加保存和取消按钮，分别绑定对应的点击事件。
<template>
  <div v-show="isEditing">
    <input v-model="editName">
    <input v-model="editAge">
    <button @click="handleSaveClick">保存</button>
    <button @click="handleCancelClick">取消</button>
</template>
<script>
export default {
  methods: {
    handleSaveClick() {
      // 保存编辑内容
    handleCancelClick() {
      // 取消编辑操作
</script>
通过以上步骤，您可以实现点击编辑按钮后显示编辑框，点击其他区域则隐藏编辑框的功能。
方案一 （自用）

方案一（自用）
