Vue 中如何實作類似 prompt 的彈出框？

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 狀態管理和使用第三方函式庫。每種方法都有自己的特點和適用場景，需要根據具體情況進行選擇。

以上是Vue 中如何實作類似 prompt 的彈出框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！