前言,在后台管理系统中,按钮,弹框啊,表单啊,列表,等等都是必不可少的,今天我们来说说,点击按钮实现出现弹框的效果,
第一步呢,先在button按钮上或者你需要点击的icon上,加上点击事件
<a-icon type="plus-square" @click="showModal()"/ >
第二步,我们在框架上找到我们的弹框效果,注意这里有 v-modal
<Modal
v-modal="modal"
:visible.sync="modal1"
title="普通的Modal对话框标题"
@on-ok="ok"
@on-cancel="cancel">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
第三步,弹框里面的内容你可以替换掉,比如你在iview,或者ele里面找到表单form,然后根据你的需要改动
第四步:我们在data里面把第二步我们v-modal绑定的值设置成隐藏的效果
data() {
return {
// 弹框
modal: false,
}}
第五步,在mothed里面,写刚才点击事件的方法
methods: {
showModal(){
this.showModal=true;
}
}
以上效果就可以实现了,新手上路,希望大家多多包涵,欢迎大家指错,谢谢