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>this.$confirm('内容', 'title', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击确定回调
}).catch(() => {
// 点击取消回调
})以上是Vue 中如何實作類似 prompt 的彈出框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
