How to implement a prompt-like popup box in Vue?

How to implement a prompt-like pop-up box in Vue?

In front-end development, pop-up boxes are very common components, especially pop-up boxes similar to prompt. The Vue framework provides us with many components, but there is no component that directly implements the prompt pop-up box. So how to implement a pop-up box similar to prompt in Vue? This article will briefly introduce several implementation methods.

Method 1: Use Vue’s own $emit

In Vue, each Vue instance has a built-in $emit method. You can use it to customize events and listen for this event in the component. We can use this feature to implement pop-up boxes.

First, in the component that needs to pop up the pop-up box, you can use $emit to customize an event. In this event, you can pass the parameters required by the pop-up box:

Vue.component('prompt', {
  template: `
    <div>
      <div v-if="visible" class="mask">
        <div class="prompt-box">
          <h3 id="title">{{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')
      }
    }
  }
})

Then in the parent component, Listen to this custom event and use v-model to two-way bind the value of the input box:

<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>

Method 2: Use Vuex state management

If the pop-up box needs to be used in multiple components , and many parameters need to be passed, which can be achieved using Vuex state management.

First, add a new state in Vuex to store the status and parameters of the pop-up box:

state: {
  isPromptShow: false,
  promptData: {
    title: '',
    inputPlaceholder: '',
    inputValue: ''
  }
}

Then, in the component that needs to pop up the pop-up box, use the $store.commit method to modify it isPromptShow and promptData status:

methods: {
  showPrompt() {
    this.$store.commit('setPromptData', {
      isPromptShow: true,
      promptData: {
        title: '请输入',
        inputPlaceholder: '请输入内容',
        inputValue: ''
      }
    })
  }
}

In the component of the pop-up box, you can use mapState and mapMutations to obtain the status in Vuex and submit mutations, thereby realizing the event response logic of the pop-up box:

<template>
  <div v-if="isPromptShow" class="mask">
    <div class="prompt-box">
      <h3 id="promptData-title">{{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>

Change the state of isPromptShow in vuex

mutations: {
  SET_PROMPT_DATA(state, data) {
    state.isPromptShow = data.isPromptShow
    state.promptData = data.promptData
  }
}

In the parent component, you not only need to use Vuex's mapState to obtain isPromptShow and promptData, but also need to use mapActions to call the method of submitting mutations in Vuex:

<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>

Method 3: Use a third-party library

If you think the above two methods are too troublesome, you can actually consider using a third-party library to implement a prompt-like pop-up box. Currently popular third-party libraries include ElementUI, Vuetify, iView, etc. These libraries provide pop-up components similar to prompt, which are very practical.

For example, there is a MessageBox pop-up box in the ElementUI component library:

this.$confirm('内容', 'title', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 点击确定回调
}).catch(() => {
  // 点击取消回调
})

Summary

This article mainly introduces three methods to implement a prompt-like pop-up box in Vue. They are using $emit, using Vuex state management and using third-party libraries. Each method has its own characteristics and applicable scenarios, and needs to be selected according to specific circumstances.

The above is the detailed content of How to implement a prompt-like popup box in Vue?. For more information, please follow other related articles on the PHP Chinese website!