orchestra-app/src/views/coursewarePlay/component/tips/index.tsx

import { Button, Popup } from 'vant';
import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';

export const tipState = reactive({
  show: false,
  title: '温馨提示',
  content: '退出后将清空批注内容',
  cancelText: '取消',
  confirmText: '确认退出'
})

export default defineComponent({
  name: 'tips-popup',
  emits: ['confirm'],
  setup(props, { emit }) {
    return () => (
      <Popup v-model:show={tipState.show} round class={styles.courseDialog}>
        <i
          class={styles.iconClose}
          onClick={() => (tipState.show = false)}></i>
        <div class={styles.title}>{tipState.title}</div>

        <div class={styles.content}>
          {tipState.content}
        </div>

        <div class={styles.popupBtnGroup}>
          <Button round onClick={() => tipState.show = false}>{tipState.cancelText}</Button>
          <Button round type="primary" onClick={() => emit("confirm")}>
            {tipState.confirmText}
          </Button>
        </div>
      </Popup>
    );
  }
});