用setTimeout实现每秒打印一个数字，1~10即可

function printNumbersWithTimeout() {
  let counter = 1;
  let timer = setTimeout(function print() {
    console.log(counter);
    counter++;
    if (counter <= 10) {
      timer = setTimeout(print, 1000); // 设置下一次执行
    }
  }, 1000);
}

printNumbersWithTimeout();

使用 setInterval实现

function printNumbersWithInterval() {
  let counter = 1;
  let interval = setInterval(function() {
    console.log(counter);
    counter++;
    if (counter > 10) {
      clearInterval(interval); // 停止定时任务
    }
  }, 1000);
}

printNumbersWithInterval();

手写一个dailog组件

子组件：

<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
      <footer>
        <button @click="confirm">确认</button>
        <button @click="cancel">取消</button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    content: {
      type: String,
      default: '内容'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close'],
  methods: {
    confirm() {
      this.$emit('close');
    },
    cancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
</style>

父组件

<template>
  <div>
    <button @click="showDialog">显示对话框</button>
    <Dialog :title="dialogTitle" :content="dialogContent" :visible="dialogVisible" @close="closeDialog" />
  </div>
</template>

<script>
import { ref } from 'vue';
import Dialog from './Dialog.vue';

export default {
  components: {
    Dialog
  },
  setup() {
    const dialogTitle = '对话框标题';
    const dialogContent = '这是对话框的内容';
    const dialogVisible = ref(false);

    const showDialog = () => {
      dialogVisible.value = true;
    };

    const closeDialog = () => {
      dialogVisible.value = false;
    };

    return {
      dialogTitle,
      dialogContent,
      dialogVisible,
      showDialog,
      closeDialog
    };
  }
};
</script>