chelvc-custom/src/components/base-popup/base-popup.vue

<template>
  <view class="base-popup">
    <u-popup
      :show="show"
      :round="10"
      mode="center"
      @close="close"
      :customStyle="popupCustomStyle"
      :closeOnClickOverlay="false"
    >
      <view class="header flex justify-between align-center">
        <view class="u-font-16 u-font-500" :style="titleStyle">{{ title }}</view>
        <u-icon :bold="true" name="close" color="#1E252B" size="16" @click="close()"></u-icon>
      </view>
      <view class="main">
        <slot name="main"></slot>
      </view>
      <view class="footer flex justify-between">
        <view>
          <slot name="footerLeft"></slot>
        </view>
        <view class="flex align-center">
          <u-button
            class="u-m-r-16"
            :customStyle="closeCustomStyle"
            @click="close()"
            v-if="cancelShow"
            >{{ cancelText }}</u-button
          >
          <u-button type="primary" :customStyle="confirmCustomStyle" @click="confirm()">{{
            confirmText
          }}</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'base-popup',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '标题',
    },
    width: {
      type: String,
      default: '520px',
    },
    fontWeight: {
      type: String,
      default: '',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    confirmText: {
      type: String,
      default: '确认',
    },
    cancelShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    titleStyle() {
      let { fontWeight } = this;

      return {
        fontWeight,
      };
    },
    popupCustomStyle() {
      return {
        width: this.width,
      };
    },
    closeCustomStyle() {
      return {
        width: '84px',
        height: '36px',
        border: '1px solid #d3d6d8',
        color: '#1E252B',
      };
    },
    confirmCustomStyle() {
      return {
        width: '84px',
        height: '36px',
        background: '#2196F3',
      };
    },
  },
  methods: {
    close() {
      this.$emit('update:show', false);
      this.$emit('close');
    },
    confirm() {
      this.$emit('confirm');
    },
  },
};
</script>

<style lang="scss">
.base-popup {
  .header {
    padding: 16px 24px;
  }

  .main {
    padding: 24px;
    border-top: 1px solid #eaebec;
    border-bottom: 1px solid #eaebec;
  }

  .footer {
    padding: 16px 20px;
  }
}
</style>