关于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>