zy-pda/components/seiminModel/seiminModel.vue

<!--
 * @Author: 廖明明
 * @Date: 2022-04-01 17:11:19
 * @LastEditors: 廖明明
 * @LastEditTime: 2022-04-02 17:03:14
 * @Description: 自定义弹窗组件
-->
<template>
  <view class="seiminModel seiminModel_mask" v-if="opts.isVisible">
    <view class="seiminModel_container animate__animated animate__fadeIn animate__faster">
      <view class="seiminModel_header">{{ opts.title }}</view>
      <view class="seiminModel_content" v-html="opts.content"></view>
      <view class="seiminModel_footer">
        <view class="seiminModel_footer__btn" v-for="(btn, i) in opts.btns" :style="{
            flex: btn.flex,
            color: btn.textColor,
          }" @click="btn.click($event)" :key="i">{{ btn.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "seiminModel",
    data() {
      return {
        // 配置项
        opts: {},
      };
    },
    methods: {
      // 显示弹窗
      show(args = {}) {
        // 默认配置项
        let defaultOptions = {
          skin: "default", //弹窗风格(default|toast|)
          isVisible: false, //是否显示弹窗
          title: "提示", //标题
          content: "", //内容
          btns: [{
              name: "取消",
              textColor: "#666",
              flex: 1,
              click: this.close
            },
            {
              name: "确定",
              textColor: "#666",
              flex: 1,
              click: this.close
            },
          ], //弹窗按钮
        };
        // 根据弹窗风格修改默认配置项
        switch (args.skin) {
          case "toast":
            defaultOptions.btns = [{
              name: "知道了",
              textColor: "#49b856",
              flex: 1,
              click: this.close,
            }, ];
            break;
        }
        // 按钮合并参数
        if (Array.isArray(args.btns)) {
          let btns = [];
          args.btns.forEach((v, i) => {
            btns.push(Object.assign({}, defaultOptions.btns[i], v));
          })
          args.btns = btns;
        }
        // 合并配置
        this.opts = Object.assign({}, defaultOptions, args, {
          isVisible: true,
        });
      },
      // 关闭弹窗
      close() {
        this.opts.isVisible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .seiminModel {
    font-size: 36rpx;
    color: #000;
    line-height: 50rpx;
    text-align: center;

    &.seiminModel_mask {
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      z-index: 9999;
      @include flex(center, center);

      .seiminModel_container {
        width: 560rpx;
        border-radius: 8rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-content: center;

        .seiminModel_header {
          height: 100rpx;
          @include flex(center, center);
        }

        .seiminModel_content {
          flex: 1;
          background-color: #f9fafb;
          margin: 0 36rpx 25rpx;
          border: 1px solid #e5e9ed;
          color: #333;
          padding: 76rpx 24rpx;
          @include numbersAndLettersNoWrap;

          .red {
            color: $textColorRed;
          }

          .green {
            color: $defaultColor;
          }
        }

        .seiminModel_footer {
          border-top: 1px solid #e5e5e5;
          height: 100rpx;
          color: #666;
          @include flex(center, center);

          .seiminModel_footer__btn {
            height: 100%;
            @include flex(center, center);
            position: relative;

            &::after {
              content: "";
              height: 86rpx;
              position: absolute;
              width: 1px;
              bottom: 0;
              right: 0;
              background-color: #dde1e5;
            }
          }
        }
      }
    }
  }
</style>