Vue でプロンプトのようなポップアップボックスを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue でプロンプトのようなポップアップボックスを実装するにはどうすればよいですか?

WBOY

リリース： 2023-06-25 12:52:55

オリジナル

3617 人が閲覧しました

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 とプロンプトデータのステータス:

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

ログイン後にコピー

親コンポーネントでは、Vuex の mapState を使用して isPromptShow とプロンプトデータを取得するだけでなく、ただし、mapActions を使用して 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>

ログイン後にコピー

方法 3: サードパーティライブラリを使用する

上記 2 つの方法が面倒だと思う場合は、実際に、サードパーティのライブラリを使用してプロンプトのようなポップアップボックスを実装することを検討できます。現在人気のあるサードパーティライブラリには、ElementUI、Vuetify、iView などが含まれます。これらのライブラリは、プロンプトに似た非常に実用的なポップアップコンポーネントを提供します。

たとえば、ElementUI コンポーネントライブラリには MessageBox ポップアップボックスがあります。

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

ログイン後にコピー

まとめ

この記事では主に、プロンプトのようなポップを実装する 3 つの方法を紹介します。 Vue の -up ボックス $emit、Vuex 状態管理、サードパーティライブラリを使用しています。各方法には独自の特徴と適用可能なシナリオがあり、特定の状況に応じて選択する必要があります。

以上がVue でプロンプトのようなポップアップボックスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。