classroom-app/src/components/m-dialog/index.tsx

import { Dialog } from 'vant';
import { defineComponent, PropType, reactive, watch } from 'vue';
import styles from './index.module.less';

export default defineComponent({
  name: 'o-dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '提示'
    },
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    showCancelButton: {
      type: Boolean,
      default: false
    },
    messageAlign: {
      type: String as PropType<'left' | 'center' | 'right'>,
      default: 'center'
    },
    dialogMarginTop: {
      type: String,
      default: '0px'
    },
    allowHtml: {
      type: Boolean,
      default: false
    }
  },
  emits: ['cancel', 'confirm', 'update:show'],
  setup(props, { emit }) {
    const state = reactive({
      show: props.show || false
    });

    // 监听状态
    watch(
      () => props.show,
      () => {
        state.show = props.show;
      }
    );
    return () => (
      <Dialog
        class={styles.oDialog}
        style={{
          marginTop: props.dialogMarginTop
        }}
        v-model:show={state.show}
        message={props.message}
        messageAlign={props.messageAlign}
        allowHtml={props.allowHtml}
        confirmButtonText={props.confirmButtonText}
        cancelButtonText={props.cancelButtonText}
        showConfirmButton={props.showConfirmButton}
        showCancelButton={props.showCancelButton}
        onConfirm={() => {
          emit('update:show', false);
          emit('confirm');
        }}
        onCancel={() => {
          emit('update:show', false);
          emit('cancel');
        }}>
        {{
          title: () => (
            <div class={styles.dialogTitle}>
              <i></i>
              {props.title}
            </div>
          )
        }}
      </Dialog>
    );
  }
});