Vue에서 프롬프트와 같은 팝업 상자를 구현하는 방법은 무엇입니까?

Vue에서 프롬프트 같은 팝업 상자를 구현하는 방법은 무엇입니까?

프런트 엔드 개발에서 팝업 상자는 매우 일반적인 구성 요소이며, 특히 팝업 상자는 프롬프트와 유사합니다. Vue 프레임워크는 많은 구성 요소를 제공하지만 프롬프트 팝업 상자를 직접 구현하는 구성 요소는 없습니다. 그렇다면 Vue에서 프롬프트와 유사한 팝업 상자를 구현하는 방법은 무엇입니까? 이 기사에서는 몇 가지 구현 방법을 간략하게 소개합니다.

방법 1: 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>

방법 2: 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에서 상태를 얻고 변형을 제출함으로써 팝업 상자의 이벤트 응답 논리를 실현할 수 있습니다.

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

상위 컴포넌트에서 isPromptShow 및 PromptData를 얻으려면 Vuex의 mapState를 사용해야 할 뿐만 아니라 Vuex에서 변형을 제출하는 메서드를 호출하려면 mapActions도 사용해야 합니다.

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

방법 3: 타사 라이브러리 사용하기

위의 두 가지 방법이 너무 번거롭다고 생각되면 실제로 고려해 볼 수도 있습니다. 타사 라이브러리를 사용하여 프롬프트 같은 팝업 상자를 구현하세요. 현재 널리 사용되는 타사 라이브러리에는 ElementUI, Vuetify, iView 등이 있습니다. 이러한 라이브러리는 프롬프트와 유사한 팝업 구성 요소를 제공하며 이는 매우 실용적입니다.

예를 들어 ElementUI 컴포넌트 라이브러리에 MessageBox 팝업 상자가 있습니다.

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

Summary

이 글에서는 주로 Vue에서 프롬프트 같은 팝업 상자를 구현하는 세 가지 방법, 즉 $emit 사용, Vuex 사용을 소개합니다. 상태 관리 및 타사 라이브러리 사용. 각 방법에는 고유한 특성과 적용 가능한 시나리오가 있으므로 특정 상황에 따라 선택해야 합니다.

위 내용은 Vue에서 프롬프트와 같은 팝업 상자를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!