classroom-instruments/src/components/TheTipDialog/index.tsx

import { NButton, NScrollbar, NModal } from 'naive-ui';
import { defineComponent } from 'vue';
import styles from './index.module.less';

export default defineComponent({
  name: 'the-tip-dialog',
  props: {
    show: Boolean,
    title: {
      type: String,
      default: '提示'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    cancelBtn: {
      type: Boolean,
      default: true
    },
    confirmBtn: {
      type: Boolean,
      default: true
    },
    content: {
      type: String,
      default: ''
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    return () => (
      <NModal
        class={['modalTitle', styles.theTipDialog]}
        on-close={() => {
          emit('close');
        }}
        show={props.show}
        preset="card"
        title={props.title}>
        <div class={styles.tipCon}>
          <div class={styles.tipBox}>
            <NScrollbar>
              <div class={styles.tip} v-html={props.content}></div>
            </NScrollbar>
          </div>
          <div class={styles.tipBtnBox}>
            {props.cancelBtn && (
              <NButton round onClick={() => emit('close')}>
                {props.cancelButtonText}
              </NButton>
            )}
            {props.confirmBtn && (
              <NButton type="primary" round onClick={() => emit('confirm')}>
                {props.confirmButtonText}
              </NButton>
            )}
          </div>
        </div>
      </NModal>
    );
  }
});