首页 > web前端 > Vue.js > Vue 中如何实现类似 prompt 的弹出框?

Vue 中如何实现类似 prompt 的弹出框?

WBOY
发布: 2023-06-25 12:52:55
原创
3617 人浏览过

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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板