后台管理系统 弹框效果 新手必备

前言，在后台管理系统中，按钮，弹框啊，表单啊，列表，等等都是必不可少的，今天我们来说说，点击按钮实现出现弹框的效果，

第一步呢，先在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;
      }

}

 

以上效果就可以实现了，新手上路，希望大家多多包涵，欢迎大家指错，谢谢