Vue 中如何实现类似 prompt 的弹出框？
在前端开发中，弹出框是非常常见的组件，尤其是类似于 prompt 的弹框。Vue 框架为我们提供了很多组件，但是并没有直接实现 prompt 弹框的组件。那么在 Vue 中如何实现类似于 prompt 的弹出框呢？本文将简单介绍几种实现方式。
方式一：使用 Vue 自带的 $emit
在 Vue 中，每个 Vue 实例都有一个自带的 $emit 方法。你可以利用它来自定义事件，并在组件中监听这个事件。我们可以利用这个特性来实现弹出框。
首先在需要弹出弹框的组件中，可以使用 $emit 来自定义一个事件，在这个事件中可以传递弹框需要的参数：
Vue.component('prompt', {
template: `
<div>
<div v-if="visible" class="mask">
<div class="prompt-box">
<h3>{{title}}</h3>
<input type="text" v-model="inputValue">
<button @click="close('cancel')">取消</button>
<button @click="close('ok')">确定</button>
</div>
</div>
</div>
`,
props: {
title: {
type: String,
default: '请输入'
},
visible: {
type: Boolean,
default: false
}
},
data() {
return {
inputValue: ''
}
},
methods: {
close(val) {
if (val === 'ok') {
this.$emit('ok', this.inputValue)
} else {
this.$emit('cancel')
}
}
}
})然后在父组件中，监听这个自定义事件，并且使用 v-model 来双向绑定输入框的值：
<template>
<div>
<button @click="showPrompt = true">弹出提示框</button>
<prompt title="请输入内容" :visible="showPrompt" @cancel="showPrompt = false" @ok="handleOk"></prompt>
</div>
</template>
<script>
import Prompt from './prompt.vue'
export default {
components: {
Prompt
},
data() {
return {
showPrompt: false,
inputValue: ''
}
},
methods: {
handleOk(val) {
this.showPrompt = false
this.inputValue = val
}
}
}
</script>方式二：使用 Vuex 状态管理
如果弹框需要在多个组件中使用，并且需要传递很多参数，可以使用 Vuex 状态管理来实现。
首先，在 Vuex 中新增一个状态来存储弹框的状态和参数：
state: {
isPromptShow: false,
promptData: {
title: '',
inputPlaceholder: '',
inputValue: ''
}
}然后，在需要弹出弹框的组件中，使用 $store.commit 方法来修改 isPromptShow 和 promptData 状态：
methods: {
showPrompt() {
this.$store.commit('setPromptData', {
isPromptShow: true,
promptData: {
title: '请输入',
inputPlaceholder: '请输入内容',
inputValue: ''
}
})
}
}在弹框的组件中，可以使用 mapState 和 mapMutations 来获取 Vuex 中的状态和提交 mutations，从而实现弹框的事件响应逻辑：
<template>
<div v-if="isPromptShow" class="mask">
<div class="prompt-box">
<h3>{{promptData.title}}</h3>
<input type="text" :placeholder="promptData.inputPlaceholder" v-model="promptData.inputValue">
<button @click="closePrompt('cancel')">取消</button>
<button @click="closePrompt('ok')">确定</button>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['isPromptShow', 'promptData'])
},
methods: {
...mapMutations({
setPromptData: 'SET_PROMPT_DATA'
}),
closePrompt(val) {
if (val === 'ok') {
this.$emit('ok', this.promptData.inputValue)
} else {
this.$emit('cancel')
}
this.setPromptData({ isPromptShow: false })
}
}
}
</script>在 vuex 中改变isPromptShow的状态
mutations: {
SET_PROMPT_DATA(state, data) {
state.isPromptShow = data.isPromptShow
state.promptData = data.promptData
}
}在父组件中，不仅需要使用 Vuex 的 mapState 来获取 isPromptShow 和 promptData，还需要使用 mapActions 来调用 Vuex 中的提交 mutations 的方法：
<template>
<div>
<button @click="showPrompt">弹出提示框</button>
<prompt v-if="isPromptShow" @ok="handleOk" @cancel="closePrompt"></prompt>
</div>
</template>
<script>
import Prompt from './prompt.vue'
import { mapState, mapActions } from 'vuex'
export default {
components: {
Prompt
},
computed: {
...mapState(['isPromptShow', 'promptData'])
},
methods: {
...mapActions(['setPromptData']),
showPrompt() {
this.setPromptData({
isPromptShow: true,
promptData: {
title: '请输入',
inputPlaceholder: '请输入内容',
inputValue: ''
}
})
},
closePrompt() {
this.setPromptData({ isPromptShow: false })
},
handleOk(val) {
console.log(val)
this.setPromptData({ isPromptShow: false })
}
}
}
</script>方式三：使用第三方库
如果你觉得以上两种方式太麻烦，其实可以考虑使用第三方库来实现类似 prompt 的弹框。当前比较流行的第三方库有 ElementUI、Vuetify、iView 等。这些库中都提供了类似于 prompt 的弹框组件，非常实用。
例如，ElementUI 组件库中有 MessageBox 弹框：
this.$confirm('内容', 'title', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击确定回调
}).catch(() => {
// 点击取消回调
})总结
本文主要介绍了在 Vue 中实现类似于 prompt 的弹框的三种方法，分别是使用 $emit、使用 Vuex 状态管理和使用第三方库。每种方法都有自己的特点和适用场景，需要根据具体情况进行选择。