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;
      }
      // 合并配置
      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;
    @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>