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ポップアップ ウィンドウのコンポーネント内 親コンポーネントで、子コンポーネントの close イベントと確認イベントをリッスンし、ポップアップ ウィンドウの可視プロパティを変更して、ポップアップ ウィンドウの開閉を制御します。 。

<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 中国語 Web サイトの他の関連記事を参照してください。