vue 弹框

• 数据互传
• 弹出状态检测
• 回调

list

<template>
  <div>
    <div>
      <button @click="showForm">add</button>
      <button @click="add2">add2</button>
    </div>
    <div>
      <a-table :columns="columns" :dataSource="data" bordered>
        <template slot="operation" slot-scope="record">
          <a-button type="link" @click="showForm(record)">Edit</a-button>
          <a-button type="link">Link</a-button>
        </template>
      </a-table>
    </div>
    <add-form :isShowForm="isShowForm" :formkey="1" :options="{title:'add',width:'300px'}" :close="close" />
  </div>
</template>
<script>
const columns = [
  {
    title: "name",
    dataIndex: "name",
    width: "25%",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "age",
    dataIndex: "age",
    width: "15%",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "address",
    dataIndex: "address",
    width: "40%",
    scopedSlots: { customRender: "address" }
  },
  {
    title: "operation",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  });
}
import AddForm from "./form";
import list from "./index";
export default {
  components: {
    AddForm
  },
  data() {
    return {
      isShowForm: false,
      sendVal: false,
      data,
      columns,
      visible: false,
      formOption: {
        title: "添加"
      }
    };
  },
  mounted() {},
  methods: {
    //显示添加表单
    //tag add：表示添加，edit:表示编辑，
    showForm() {
      this.isShowForm = true;
    },
    add2() {
      this.$confirm({
        title: "title",
        content: list,
        onOk() {
          console.log("click ok");
        },
        cancelText: "Click to destroy all",
        onCancel() {
          console.log("click cancel");
        }
      });
    },
    
    close() {
      console.log("列表页知道表单关闭了");
       this.isShowForm = false;
    }
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>

form

<template>
  <div>
    <my-dialog   :show="isShowForm" @callBack="callBack"  :options="options" >
       <a-form-model :model="form">
          <a-form-model-item label="Activity name">
            <a-input v-model="form.name" />
          </a-form-model-item>
        </a-form-model>
    </my-dialog>
    
  </div>
</template>
<script>
import myDialog from "@/components/dialog";
export default {
  props: ["isShowForm",'options','close','formkey'],
  components: {
    myDialog
  },
  data() {
    return {
      form: {
        name: ""
      },
      myModal: true
    };
  },
  watch: {
    isShowForm:function (newV) {
     //如果表单显示状态有变化就清空
     this.formData={}
      //如果是true,在请求数据
      if (newV) {
        //需要等控件数据加载完后，在加载表单数据
         console.log("弹框",newV);
      }
      
    }
  },
  mounted() {},
  methods: {
   
    callBack(status) {
      console.log("status",status);
      if (status=='ok') {
        //提交数据

        //关闭弹框
      }else{
        //点击的是取消按钮，直接关闭
        this.close();
      }
      //如果提交成功，调用父方法close关闭弹框
      //this.close()
    },
   
    
  }
};
</script>

dialog

<template>
  <div>
    <a-modal
      ref="ruleForm"
      :visible="true"
      v-if="show"
      :destroyOnClose="true"
      :title="options.title||'默认'"
      :width="options.width||'200px'"
    >
      <div class="modal-close-icon" @click="cancel">
        <a-icon type="close" />
      </div>
      <div class="model-content">
        <slot name="model-content"></slot>
      </div>

      <template slot="footer">
        <a-button @click="cancel">取消</a-button>
        <a-button type="primary" @click="ok">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>
<style lang="less">
.ant-modal-close-x{display: none !important;}
.modal-close-icon {
  position: absolute;
  top: 18px;
  right: 21px;
  z-index: 99999;
}
</style>
<script>
export default {
  props: ["show", "options", "formkey"],
  data() {
    return {
      form: {}
    };
  },
  watch: {},
  mounted() {},
  methods: {
    ok() {
      // this.$emit("formCallBack");

      this.$emit("callBack",'ok');
      //官方给出的 this.$refs.ruleForm.resetFields();这个方法报错，就用给表单赋空值的方式解决关闭后清楚数据
    },
    cancel() {
       this.$emit("callBack",'cancel');
    }
  }
};
</script>