将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 模态框触发部分

<div v-else style="width:100%">
    <a><Icon type="md-person" size="26" color="#ffbc41" @click="modal = true"/></a> 
</div>

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

            2.1.2  模态框部分

<Modal v-model="modal" :closable="false" :footer-hide="true" width="566">
    <Row style="margin-top:25px">
        <Col span="10" offset="4" >
            <span style="font-weight:600;font-size:18px">反黑平台登陆</span>
        </Col>
        <Col span="8" style="text-align:right">
            <a><img src="./../../static/home/login_close.png" @click="closeModal" style="width:23px;height:23px" alt="关闭图标"></a>
        </Col>
            <Col span="16" offset="4" style="margin-top:30px">
                <Form ref="login" :model="login">
                    <FormItem>
                        <Input ref="login_name_input" v-model="login.loginName" @on-focus="login_name_input_box" @on-blur="cancle_focus_login_name" placeholder="邮箱/手机号码" style="height:40px"></Input>
                    </FormItem>
                    <FormItem>
                        <Input type="password" v-model="login.password" :maxlength="20" @on-focus="password_input_box" @on-blur="cancle_focus_password" placeholder="密码"></Input>
                    </FormItem>
                    <FormItem>
                        忘记密码？
                    </FormItem>
                    <FormItem>
                        <Button style="width:238px;height:45px;background-color:#c5a1ff">登录</Button>
                    </FormItem>
                  </Form>
             </Col>
       </Row>
</Modal>

        其中<Modal>标签中，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即可完成模太框关闭功能。