Bagaimana untuk melaksanakan kotak pop timbul seperti segera dalam Vue?

Bagaimana untuk melaksanakan kotak timbul seperti segera dalam Vue?

Dalam pembangunan bahagian hadapan, kotak timbul adalah komponen yang sangat biasa, terutamanya kotak timbul yang serupa dengan gesaan. Rangka kerja Vue membekalkan kita dengan banyak komponen, tetapi tiada komponen yang secara langsung melaksanakan kotak pop timbul segera. Jadi bagaimana untuk melaksanakan kotak pop timbul yang serupa dengan gesaan dalam Vue? Artikel ini akan memperkenalkan beberapa kaedah pelaksanaan secara ringkas.

Kaedah 1: Gunakan $emit

terbina dalam Vue Dalam Vue, setiap tika Vue mempunyai kaedah $emit terbina dalam. Anda boleh menggunakannya untuk menyesuaikan acara dan mendengar acara ini dalam komponen. Kami boleh menggunakan ciri ini untuk melaksanakan kotak pop timbul.

Pertama, dalam komponen yang perlu muncul kotak timbul, anda boleh menggunakan $emit untuk menyesuaikan acara Dalam acara ini, anda boleh lulus parameter yang diperlukan oleh kotak timbul:

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

Kemudian dalam. komponen induk, dengar acara tersuai ini dan gunakan v-model untuk mengikat nilai kotak input dua hala:

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

Kaedah 2: Gunakan pengurusan keadaan Vuex

Jika kotak pop timbul perlu digunakan dalam berbilang komponen dan perlu melepasi banyak parameter, anda boleh menggunakan pengurusan keadaan Vuex untuk mencapainya.

Mula-mula, tambahkan keadaan baharu dalam Vuex untuk menyimpan status dan parameter kotak timbul:

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

Kemudian, dalam komponen yang perlu muncul kotak timbul, gunakan kaedah $store.commit untuk ubah suai isPromptShow dan promptData menyatakan:

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

Dalam komponen kotak pop timbul, anda boleh menggunakan mapState dan mapMutations untuk mendapatkan status dalam Vuex dan menyerahkan mutasi, dengan itu merealisasikan logik tindak balas acara kotak pop timbul:

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

Tukar status isPromptShow dalam vuex

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

Dalam komponen induk, bukan sahaja Anda perlu menggunakan mapState Vuex untuk mendapatkan isPromptShow dan promptData, dan anda juga perlu menggunakan mapActions untuk memanggil kaedah penyerahan mutasi dalam Vurreee:

Kaedah 3: Gunakan perpustakaan pihak ketiga

Jika anda rasa kedua-dua kaedah di atas terlalu menyusahkan, anda sebenarnya boleh menganggapnya Gunakan perpustakaan pihak ketiga untuk melaksanakan kotak pop timbul seperti segera. Perpustakaan pihak ketiga yang popular pada masa ini termasuk ElementUI, Vuetify, iView, dll. Perpustakaan ini menyediakan komponen pop timbul serupa dengan prompt, yang sangat praktikal.

Sebagai contoh, terdapat kotak timbul MessageBox dalam pustaka komponen ElementUI:

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

Ringkasan

Artikel ini terutamanya memperkenalkan tiga kaedah untuk melaksanakan kotak timbul seperti segera dalam Vue, iaitu menggunakan $emit, menggunakan Vuex pengurusan negeri dan menggunakan perpustakaan pihak ketiga. Setiap kaedah mempunyai ciri sendiri dan senario yang boleh digunakan, dan perlu dipilih mengikut keadaan tertentu.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak pop timbul seperti segera dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!