将Vue样式库iview中的Modal模态框改造为漂亮的登录模态框

目录

1 前言

    1.1 遇到的问题

    1.2 不想放弃iview的Modal组件的原因

2 改造要点

    2.1 template部分

        2.1.1 模态框触发部分

        2.1.2  模态框部分

    2.2 script部分

3 最终效果

4 总结

---

1 前言

    1.1 遇到的问题

       之前试图将iview中的Modal组件按自己的需求进行定制时，遇到了很多问题，典型地，最主要有以下两个问题：

       （1）如图中右边的关闭图标，只能使用原生的，该样式实在谈不上好看；

       （2）标题文字样式难以定制；

       （3）顶部与内容之间存在一条横线。

  1.2 不想放弃iview的Modal组件的原因

        尽管有上述的问题，但笔者作为一个主攻后端的前端菜鸟，实在是没有能力自己写一个模态框。之前一个项目为了逃避这个问题，为登录页面单独做了一个页面。但最近一个项目仍然要用到这个模态框，这次不再想逃避，决定排除万难也要将这个Modal改造成为自己想要的样子。

2 改造要点

      该节以template、script两部分对改造方法进行说明。

    2.1 template部分

          2.1.1 模态框触发部分

        其中modal为script部分定义的变量，默认为false.

            2.1.2  模态框部分

    
        
            反黑平台登陆
        
        
            
        
            
                

                    
                        
                    
                    
                        
                    
                    
                        忘记密码？
                    
                    
                        登录
                    
                  
             
       

        其中标签中，v-modal="modal"中的modal对应2.1.1中的modal，关键在于设置closable和footer-hide，即不显示iview本身的关闭按钮，不显示底部很丑的“取消”和“确定”按钮，并且，不设置title，不使用header的slot。

        然后将下面当成普通的页面，做自己想要的样式。如按自己的需求设置标题样式、关闭按钮换成自己的图标，其中关闭按钮绑定closeModal()函数。

       2.2 script部分

closeModal() {
    this.modal = false;
},

            正如打开Modal模态框将modal设置为true，这里只要将modal设计为false，即可将模态框关闭。

3 最终效果

4 总结

       总体来说，要将Vue样式库iview中的Modal改造为漂亮的登录模态框，首先对Modal组件不设置标题、不设计header的slot，不显示关闭按钮（closable=true），不显示底部（footer-hide=true），并对自己的关闭按钮绑定一个函数，该函数将modal设计为false即可完成模太框关闭功能。