시간 초과를 구현하고 vue에서 팝업 창을 닫는 방법

Vue 프로젝트의 팝업 창의 경우 사용자가 응답하지 않고 계속 기다릴 수 있어 사용자가 불편함을 느낄 수 있다는 점을 고려해야 합니다. 이러한 상황을 방지하기 위해 시간 제한을 설정하여 팝업 창을 자동으로 닫을 수 있습니다.

Element UI 라이브러리는 Vue 프로젝트에서 팝업 창을 구현하는 데 사용됩니다. Element UI는 팝업 창을 생성하는 ElDialog 구성 요소를 제공합니다. ElDialog 컴포넌트의 beforeClose 속성을 사용하여 시간이 지남에 따라 팝업 창을 닫는 기능을 구현할 수 있습니다.

Vue 프로젝트에서는 팝업창이 생성될 때 ElDialog의 beforeClose 속성을 통해 콜백 함수를 설정할 수 있는데, 이 콜백 함수는 팝업 창이 닫히기 전에 자동으로 실행됩니다. 콜백 함수에 타이머를 설정하고, 지정된 시간 내에 팝업창의 "확인" 또는 "취소" 버튼을 클릭하면 팝업창이 자동으로 닫힐 수 있습니다.

구체적인 구현 방법은 다음과 같습니다.

1 팝업 창 구성 요소에서 beforeClose 속성을 설정하고 콜백 함수를 지정합니다.

<template>
  <el-dialog
    title="弹窗标题"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <span>弹窗内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>     
      <el-button type="primary" @click="confirmDialog" >确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        timer: null, // 定时器
        timeout: 5000, // 超时时间，单位毫秒
      }
    },
    methods: {
      handleClose (done) {
        clearTimeout(this.timer) // 清除定时器
        done() // 关闭弹窗
      },
      confirmDialog () {
        // 点击“确认”按钮时，手动关闭定时器，调用 done() 关闭弹窗
        clearTimeout(this.timer)
        this.$emit('confirm')
      },
      closeDialog () {
        this.$emit('close')
      }
    },
    mounted: function () {
      // 定义一个 5 秒后自动关闭弹窗的定时器
      this.timer = setTimeout(() => {
        this.$emit('close')
      }, this.timeout)
    },
  }
</script>

2. 하위 구성 요소의 닫기 및 확인 이벤트를 수신하고 팝업 창의 visible 속성을 수정하여 팝업 창 열기 및 닫기를 제어합니다.

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹窗</el-button>
    <my-dialog
      :visible="dialogVisible"
      @close="dialogVisible = false"
      @confirm="dialogVisible = false"
    ></my-dialog>
  </div>
</template>

<script>
  import MyDialog from './MyDialog.vue'
  export default {
    components: {
      MyDialog
    },
    data () {
      return {
        dialogVisible: false
      }
    },
    methods: {
      showDialog () {
        this.dialogVisible = true
      },
    },
  }
</script>

이 시점에서 Vue 프로젝트에서는 팝업 창 구성 요소에 일부 논리 코드를 추가하면 팝업 창을 닫는 시간 초과 기능을 구현할 수 있습니다.

위 내용은 시간 초과를 구현하고 vue에서 팝업 창을 닫는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!