A-Modal 实现弹窗交互

通过 Modal 标签我们可以实现在当前页面弹出对话框与用户进行交互。

当你需要一个新页面供用户进行浏览或输入，但又不想离开当前页面，此时你就可使用 Modal 标签实现弹窗式页面。

一、Modal页面

1. HTML

在 Index.vue 新建同级文件 userModal.vue，其文件内容如下：

<template>
    <a-modal
        :title="type === 'add' ? '新增' : '详情'"
        :visible="visible"
        width="40%"
        @cancel="cancel"  
    >
        <!-- 右下角确认取消按钮 -->
        <template slot="footer">
            <a-button key="submit" type="primary" @click="ok">确定</a-button>
            <a-button key="back" @click="cancel">取消</a-button>
        </template>

        <div>
            Put content in here
        </div>
    </a-modal>
</template>

2. Script

userModal.vue 页面的 script 部分代码如下：

<script>
export default {
    name: "InfoModal",
    data() {
        return {
            type: '',
            visible: false,
        }
    },
    methods: {
        // 接收 Index 页面传来的参数
        paramReceive (type, data) {
            this.type = type
            this.visible = true
            console.log(data)
    },
    cancel() {
        this.visible = false
        this.$message.success('关闭页面')
    },
    ok() {
        this.visible = false
        this.$message.success('关闭页面')
    }
    }
}
</script>

二、Index 页面

1. HTML

在 Index.vue 其文件内容如下：

<template>
    <div>
        <a-button @click="clickOption('add', '123')">新增</a-button>
        <a-button @click="clickOption('detail', '456')">详情</a-button>

        <!-- 组件使用 -->
        <userModal ref="userModal"></userModal>
    </div>
</template>

2. Script

Index.vue 页面的 script 部分代码如下：

<script>
import userModal from './userModal'

export default {
    components: {
        // 声明组件
        userModal
    },
    methods: {
        async clickOption (type, data) {
            switch (type) {
                case 'add':
                // 点击按钮传入参数并显示 Modal 页面
                this.$refs.userModal.paramReceive(type, data)
                break
            case 'detail':
                // 点击按钮传入参数并显示 Modal 页面
                this.$refs.userModal.paramReceive(type, data)
                break
            }
        }
    }
}
</script>