Vue 实现类似 prompt 弹出框的方法

在 Vue 项目开发中，我们常常需要实现类似原生 prompt 弹出框的交互效果，方便与用户进行信息交互。下面就来介绍几种常见的实现方式。

使用 Vue 组件

可以创建一个自定义的 Vue 组件来模拟弹出框。定义一个包含输入框和确认、取消按钮的组件。

<template>
  <div class="prompt-modal">
    <div class="modal-content">
      <p>{{ message }}</p>
      <input v-model="inputValue" type="text" />
      <button @click="confirmInput">确定</button>
      <button @click="cancelInput">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      message: ''
    };
  },
  methods: {
    confirmInput() {
      this.$emit('confirm', this.inputValue);
    },
    cancelInput() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped>
.prompt-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

在父组件中使用这个组件时，通过 v-model 绑定显示和隐藏状态，并监听 confirm 和 cancel 事件来获取用户输入或取消操作。

<template>
  <div>
    <button @click="showPrompt">点击弹出</button>
    <PromptModal
      v-model="isPromptVisible"
      :message="promptMessage"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
import PromptModal from './PromptModal.vue';

export default {
  components: {
    PromptModal
  },
  data() {
    return {
      isPromptVisible: false,
      promptMessage: '请输入内容'
    };
  },
  methods: {
    showPrompt() {
      this.isPromptVisible = true;
    },
    handleConfirm(value) {
      console.log('用户输入:', value);
      this.isPromptVisible = false;
    },
    handleCancel() {
      console.log('用户取消');
      this.isPromptVisible = false;
    }
  }
};
</script>

使用插件

也可以借助一些成熟的 Vue 插件来实现，如 vue - sweetalert2。首先安装插件：

npm install vue - sweetalert2 sweetalert2

然后在 Vue 项目中引入并使用：

import Vue from 'vue';
import Swal from'sweetalert2';
import VueSweetalert2 from 'vue - sweetalert2';

Vue.use(VueSweetalert2, {
  Swal
});

// 使用
this.$swal.fire({
  title: '请输入内容',
  input: 'text',
  inputPlaceholder: '输入',
  showCancelButton: true,
  confirmButtonText: '确定',
  cancelButtonText: '取消'
}).then((result) => {
  if (result.value) {
    console.log('用户输入:', result.value);
  }
});

通过上述方法，无论是自定义组件还是使用插件，都能在 Vue 项目中灵活实现类似 prompt 的弹出框功能，满足不同场景下的交互需求。