vue组件 - 弹出框组件，这一个就能应对所以需求

小咪咪 2023-01-01 14:58 69阅读 0赞

# O - 功能说明 #

主要就是弹出层的显示与隐藏，对于单选框的样式修改，和保留的初始变量进行渲染。

# Ⅰ- 壹 - 效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]

# Ⅱ - 贰 - 代码文件 #

## 一 创建文件showModal.vue ##

<template>
      <div class="myModal">
        <div class="myModalBox">
          <div class="clone" @click="$emit('update:chengMode', false)">
            <img src="../image/iconchahao.png" alt="" />
          </div>
          <div class="myModalBox_hander">试驾审核</div>
          <div class="myModalBox_concat">
            <div class="myModalBox_concat_con">
              <div class="myModalBox_concat_con_tit">客户: 张国庆 | 1324553444</div>
              <div class="myModalBox_concat_con_tit">
                预约时间: 2020-09-20 15:30：00
              </div>
              <div class="myModalBox_concat_con_tit">
                试驾车型: 试驾车型：奥迪A6 2020款 1.8T 自动 豪华型
              </div>
            </div>
            <div class="myModalBox_concat_radio">
              <div
                :class="
                  isChecked
                    ? 'myModalBox_concat_radioitem atv'
                    : 'myModalBox_concat_radioitem'
                "
                @click="isCheckedFun"
              >
                <i :class="isChecked ? 'radiosty atv' : 'radiosty'"></i>
                <input
                  type="radio"
                  :checked="isChecked"
                  name="radio1"
                  id="cheyes1"
                  class="inputradio"
                />
                <label for="cheyes1"> 同意试驾</label>
              </div>
              <div
                :class="
                  isChecked
                    ? 'myModalBox_concat_radioitem'
                    : 'myModalBox_concat_radioitem atv'
                "
                @click="isCheckedFun"
              >
                <i :class="isChecked ? 'radiosty' : 'radiosty atv'"></i>
                <input
                  type="radio"
                  :checked="!isChecked"
                  name="radio1"
                  id="cheyes2"
                  class="inputradio"
                />
                <label for="cheyes2">拒绝试驾</label>
              </div>
            </div>
            <div class="myModalBox_concat_title">
              <div class="textarea" v-if="!isChecked">
                <textarea
                  name="text"
                  v-model="textareaTit"
                  id=""
                  autofocus
                  placeholder="请输入拒绝理由"
                ></textarea>
              </div>
              <div class="tagtitle">
                <i
                  :class="istagtitle ? 'tagtitleradiosty atv' : 'tagtitleradiosty'"
                  v-if="tabsIndex"
                ></i>
                <input
                  v-if="tabsIndex"
                  type="radio"
                  :checked="!isChecked"
                  @click="istagtitle = !istagtitle"
                  name="radio3"
                  id="cheyes3"
                  class="tagtitleradio"
                />
                <label for="cheyes3">{ { 
                  tabsIndex
                    ? "结束后，将邀请客户填写试驾反馈"
                    : "提醒：同意试驾后，将通知客户已预约成功"
                }}</label>
              </div>
            </div>
          </div>
          <div class="myModalBox_fouter">
            <div
              class="myModalBox_fouter_cancel myModalBox_fouter_but"
              @click="$emit('update:chengMode', false)"
            >
              取消
            </div>
            <div
              class="myModalBox_fouter_submit myModalBox_fouter_but"
              @click="submitFun"
            >
              { {  tabsIndex ? "结束试驾" : "确定" }}
            </div>
          </div>
        </div>
      </div>
    </template>
     
    <script>
    export default { 
      name: 'commonModal',
      props: { 
        showModal: { 
          default: false,
          type: Boolean
        },
        tabsIndex:{ 
          type:Number
        }
    
      },
      data () { 
        return { 
          isChecked:true,
          istagtitle:true,
          textareaTit:""
        }
      },
      created () { 
       
      },
      mounted() { 
       
      },
      methods: { 
        
        //同意试驾拒绝试驾
        isCheckedFun(){ 
          this.isChecked=!this.isChecked
          console.log(this.isChecked);
        },
      //点击 确定或者结束试驾
      submitFun(){ 
        //数据根据tabsIndex 是待审核0和待试驾1 请求不同的接口
        console.log(" 请求数据");
        this.$emit('update:chengMode', false)
    
      },
      
      },
      onLoad(){ 
       
      }
    }
    </script>
     
    <style lang="scss" scoped>
    .myModal { 
      height: 100%;
      width: 710rpx;
      background: rgba(0, 0, 0, 0.6);
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      overflow: hidden;
      z-index: 9999;
      top: 0;
      padding: 20rpx;
      .myModalBox { 
        width: 610rpx;
        min-height: 646rpx;
        background: #ffffff;
        opacity: 1;
        border-radius: 16rpx;
        padding: 20rpx 40rpx 20rpx 40rpx;
        position: relative;
        .myModalBox_hander { 
          font-size: 48rpx;
          color: #444444;
          text-align: center;
          margin-top: 20rpx;
        }
        .myModalBox_concat { 
          padding-bottom: 130rpx;
          height: 100%;
          .myModalBox_concat_con { 
            height: 200rpx;
            background: #f2f1f6;
            margin-top: 40rpx;
            margin-bottom: 20rpx;
            border-radius: 16rpx;
            padding: 34rpx 22rpx 0 22rpx;
            .myModalBox_concat_con_tit { 
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              color: #1a1a1a;
              font-size: 28rpx;
              margin-bottom: 22rpx;
            }
          }
          .myModalBox_concat_radio { 
            display: flex;
            .myModalBox_concat_radioitem { 
              width: 200rpx;
              height: 60rpx;
              border: 1px solid #e3e3e3;
              color: #767676;
              opacity: 1;
              border-radius: 30rpx;
              font-size: 28rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              margin-right: 20rpx;
              &.atv { 
                border: 2rpx solid #597ef7;
                color: #597ef7;
              }
              .inputradio { 
                opacity: 0;
              }
              .radiosty { 
                left: 20rpx;
                width: 24rpx;
                height: 24rpx;
                border-radius: 50%;
                background: #ffffff;
                border: 2rpx solid #e3e3e3;
                position: absolute;
                background-clip: content-box;
                padding: 4rpx;
                &.atv { 
                  background: #597ef7;
                  border: 2rpx solid #597ef7;
                  background-clip: content-box;
                  padding: 4rpx;
                }
              }
            }
          }
          .myModalBox_concat_title { 
            position: relative;
            margin-top: 28rpx;
            margin-bottom: 36rpx;
            color: #9a9a9a;
            font-size: 24rpx;
            .textarea { 
              border-radius: 16rpx;
              height: 160rpx;
              border: 2rpx solid #e3e3e3;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
            }
            .tagtitle { 
              position: relative;
              .tagtitleradio { 
                opacity: 0;
              }
              .tagtitleradiosty { 
                position: absolute;
                left: 10rpx;
                top: 4rpx;
                width: 24rpx;
                height: 24rpx;
                border-radius: 50%;
                background: #ffffff;
                border: 2rpx solid #e3e3e3;
                position: absolute;
                background-clip: content-box;
                padding: 4rpx;
                &.atv { 
                  background: #597ef7;
                  border: 2rpx solid #597ef7;
                  background-clip: content-box;
                  padding: 4rpx;
                }
              }
            }
          }
        }
    
        .myModalBox_fouter { 
          height: 84rpx;
          display: flex;
          width: 610rpx;
          justify-content: space-around;
          position: absolute;
          bottom: 60rpx;
          .myModalBox_fouter_but { 
            width: 240rpx;
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
            border-radius: 8rpx;
          }
          .myModalBox_fouter_cancel { 
            background: #e5e5e5;
            color: #727272;
          }
          .myModalBox_fouter_submit { 
            background: #38394f;
            color: #ffffff;
          }
        }
        .clone { 
          position: absolute;
          width: 60rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          margin: 0 auto;
          right: 10rpx;
          top: 10rpx;
          > img { 
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
    }
    </style>

## 二 使用： ##

先导入在声明，接受tabsIndex

<show-modal
          v-if="isShow" //控制显示和隐藏
          :tabsIndex="tabsIndex" //根据需求
          :chengMode.sync="isShow" //组件双向绑定isShow
        ></show-modal>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: /images/20221120/c91e252715da479eaf38d7f7aeb06bdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]: /images/20221120/616cb977453f42bfb386fe45ff2c4a72.png