关于a-modal提示弹窗的经验
我负责的是一个支付弹窗页面,类似百度网盘的会员购买界面。我以UI图为参考去除了弹窗右下角的确认和取消按钮。方法在开发文档中有显示:footer=“null”,footer为脚尾文件展示,赋值为空则什么也不显示。
<a-modal v-model="visible" :footer="null">
由于存在不同套餐的选择情况,所以我是用对div进行分隔,在对弹窗背景颜色进行填充时,我通过网页F12观察得知弹窗默认样式ant-modal-content,可以通过增加div结构来进行样式覆盖,不过此处太麻烦了,所以我选择通过deep方法改变封装过的弹窗默认样式。
::v-deep .ant-modal-content{
background-color: #F5F6FA;
height: 410px;
}
该支付弹窗拥有点击支付套餐选项改变样式的功能,此处添加了动态样式
:class。设置了原本change样式和点击后呈现的changes样式,isActive初始值为1,当点击到item.id的套餐选项时,会进行判断isAcitive的值是否为点击选项的id值,如果是则进行样式变换。通过点击事件onclick实现。
<div style="cursor: pointer"
@click="onClick(item)"
:class="isActive == item.id?'changes':'change'">
<div style="font-size: 16px;color: #333333;font-weight: 500">{{ item.day }}</div>
<div style="color: #C79745;font-size: 24px;font-weight: 600">{{ item.pay }}</div>
<div style="text-decoration:line-through;color: #999999">{{ item.pays }}</div>
</div>
data() {
return {
isActive: 1,
};
},
.change {
width: 150px;
height: 100px;
border: 1px;
border-radius: 10px;
background-color: #FFFFFF;
text-align: center;
}
.changes {
width: 150px;
height: 100px;
border: 1px solid #C79745;
border-radius: 10px;
background-color: #FFEED0;
text-align: center;
}
实现复选框点击事件改变文本框内文字和按钮颜色功能:
一开始使用antd-checkbox组件,但是组件中已经封装过了,不利于进行自定义修改,所以选择使用input-label模式进行模拟checkbox的复选功能(使用type=“checkbox”)。
<input class="radio_type"
type="checkbox"
name="type"
id="radio"
checked="checked"
style="top: -20px;padding-right: 25px"/>
<label for="radio">
<div style="font-size: 18px;">fengliuran</div>
<div style="font-size: 10px;padding-top: 5px">(会员至2022.01.12)</div>
</label>
分割线:
<div style="width: 1px; height: 55px; background:#999999"></div>