将Vue样式库iview中的Modal模态框改造为漂亮的登录模态框
目录1 前言1.1遇到的问题1.2不想放弃iview的Modal组件的原因2改造要点2.1template部分2.1.1模态框触发部分2.1.2 模态框部分2.2script部分3最终效果4 总结1 前言1.1遇到的问题之前试图将iview中的...
目录
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即可完成模太框关闭功能。
更多推荐
所有评论(0)