vue ant design点击弹出Mod页面

样图

第一步:创建list页面

<template>
  <a-row :gutter="24">
    <div>
<!--      <a @click="test()" style="padding-left: 5%">测试页面</a>-->

      <button v-on:click='test()'>测试页面</button>
    </div>


    <model-test ref="test" @ok="modalFormOk"></model-test>

  </a-row>
</template>


<script>

  import { getAction } from '@/api/manage'
  import ModelTest from './modules/ModelTest'

  export default {
    name: 'TestList',
    components: { ModelTest },
    comments:{
      url:{

      },

    },
    data(){
      return {
        url: {

        },
      }
    },
    created() {
    },
    methods:{

      /**
       * 测试新增页面弹出
       * @param record
       *
       */
      test: function (record) {
        this.$refs.test.edit({});
        this.$refs.test.title = "测试页面";
        this.$refs.test.disableSubmit = false;
      },
    },
  }
</script>

<style scoped>
  @import '~@assets/less/common.less'
</style>

第二步:定义事件

	<a @click="test()" style="padding-left: 5%">测试页面</a>

第三步在js中定义test function 方法

   /**
       * 测试新增页面弹出
       * @param record
       *
       */
      test: function (record) {
        this.$refs.test.edit();
        this.$refs.test.title = "测试页面";
        this.$refs.test.disableSubmit = false;
      },

第四步:创建Mod新页面

<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">


    <a-row class="form-row" :gutter="16">
      <a-col :span="12">
        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input placeholder="请输入姓名" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入工号" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  export default {
    name: 'ModelTest',
    comments:{

    },
    data(){
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        url: {

        },
      }
    },
    created () {
    },
    methods: {
      add(){

      },
      edit(record){
        this.visible = true;
      },

      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      },

      handleOk () {

      }
    },
  }
</script>

<style scoped>

</style>

第五步:回到点击事件页面 找到js 引入Mod页面所在目录并在compontes中引入

import ModelTest from './modules/ModelTest'

 components: { ModelTest },

第六步:定义名称和方法引用名称要一致

 <model-test ref="test" @ok="modalFormOk"></model-test>

/**
       * 测试新增页面弹出
       * @param record
       *
       */
      test: function (record) {
        this.$refs.test.edit({});
        this.$refs.test.title = "测试页面";
        this.$refs.test.disableSubmit = false;
      },

Mod代码

<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">


    <a-row class="form-row" :gutter="16">
      <a-col :span="12">
        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input placeholder="请输入姓名" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入工号" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  export default {
    name: 'ModelTest',
    comments:{

    },
    data(){
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        url: {

        },
      }
    },
    created () {
    },
    methods: {
      add(){

      },
      edit(record){
        this.visible = true;
      },

      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      },

      handleOk () {

      }
    },
  }
</script>

<style scoped>

</style>