nutui/src/packages/__VUE/dialog/index.vue

<template>
  <nut-popup
    :teleport="teleport"
    v-model:visible="showPopup"
    :close-on-click-overlay="closeOnClickOverlay"
    :lock-scroll="lockScroll"
    :pop-class="overlayClass"
    :style="overlayStyle"
    round
    @click-overlay="closed"
    @click-close-icon="closed"
  >
    <view :class="classes">
      <view v-if="title" class="nut-dialog__header">
        <slot v-if="$slots.header" name="header"></slot>
        <template v-else>{{ title }}</template>
      </view>

      <view class="nut-dialog__content" :style="{ textAlign }">
        <slot v-if="$slots.default" name="default"></slot>
        <view v-else-if="typeof content === 'string'" v-html="content"></view>
        <component v-else :is="content" />
      </view>

      <view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
        <slot v-if="$slots.footer" name="footer"></slot>
        <template v-else>
          <nut-button
            size="small"
            plain
            type="primary"
            class="nut-dialog__footer-cancel"
            v-if="!noCancelBtn"
            @click="onCancel"
          >
            {{ cancelText || translate('cancel') }}
          </nut-button>
          <nut-button v-if="!noOkBtn" size="small" type="primary" class="nut-dialog__footer-ok" @click="onOk">
            {{ okText || translate('confirm') }}
          </nut-button>
        </template>
      </view>
    </view>
  </nut-popup>
</template>
<script lang="ts">
import { onMounted, computed, watch, ref, PropType, VNode } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { componentName, create, translate } = createComponent('dialog');
import Popup, { popupProps } from '../popup/index.vue';
import Button from '../button/index.vue';
export default create({
  inheritAttrs: false,
  components: {
    [Popup.name]: Popup,
    [Button.name]: Button
  },
  props: {
    ...popupProps,
    closeOnClickOverlay: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: [String, Object] as PropType<string | VNode>,
      default: ''
    },
    noFooter: {
      type: Boolean,
      default: false
    },
    noOkBtn: {
      type: Boolean,
      default: false
    },
    noCancelBtn: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: ''
    },
    okText: {
      type: String,
      default: ''
    },
    cancelAutoClose: {
      type: Boolean,
      default: true
    },
    textAlign: {
      type: String,
      default: 'center'
    },
    closeOnPopstate: {
      type: Boolean,
      default: false
    },
    footerDirection: {
      type: String,
      default: 'horizontal' //vertical
    }
  },
  emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
  setup(props, { emit }) {
    const showPopup = ref(props.visible);
    onMounted(() => {
      if (props.closeOnPopstate) {
        window.addEventListener('popstate', function () {
          closed();
        });
      }
    });

    watch(
      () => props.visible,
      (value) => {
        showPopup.value = value;
      }
    );

    const classes = computed(() => {
      return {
        [componentName]: true
      };
    });

    const update = (val: boolean) => {
      emit('update', val);
      emit('update:visible', val);
    };

    const closed = () => {
      update(false);
      emit('closed');
    };

    const onCancel = () => {
      emit('cancel');
      if (props.cancelAutoClose) {
        closed();
      }
    };

    const onOk = () => {
      emit('ok');
      closed();
    };

    return {
      closed,
      classes,
      onCancel,
      onOk,
      showPopup,
      translate
    };
  }
});
</script>