vue编写messageBox，使用函数调用

最新推荐文章于 2025-05-30 11:26:00 发布

正在输入代码中

最新推荐文章于 2025-05-30 11:26:00 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vue 组件开发

本文链接：https://blog.youkuaiyun.com/qq_26744901/article/details/77224783

web前端专栏收录该内容

143 篇文章

订阅专栏

本文介绍了一个基于 Vue 的 MessageBox 弹窗组件实现方法。该组件可通过简单的 API 调用展示确认或提示对话框，并支持回调函数以响应用户的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

调用：

this.$messageBox({
  text: '123123213',
  callback:action=>{
    console.log(action);//confirm(确定)cancel（确定）
  }
})

代码：

messageBox.js

import  messageBoxVue from './messageBox.vue'
export default {
  install(Vue){
    let messageBox = Vue.extend(messageBoxVue);
    let $messageBox = new messageBox();
    document.body.appendChild($messageBox.$mount().$el);
    Vue.prototype.$messageBox = (model => {
      model.show=true;
      $messageBox.model=model;
    });
  }
}

messageBox.vue:

<template>
  <div>
    <transition name="bounce">
      <div v-show="model.show" class="messageBox">
        <div class="messageBox_header">
          <div class="messageBox_header_title">
            提示
          </div>
        </div>

        <div class="messageBox_content">
          {{model.text}}
          <div v-html="model.html"></div>
        </div>
        <div class="messageBox_btns">
          <div class="messageBox_btns_default messageBox_btns_primary" @click="close('confirm')">确定</div>
          <div class="messageBox_btns_default " @click="close('cancel')">取消</div>
        </div>
      </div>
    </transition>
    <div v-show="model.show" class="messageBox_model"></div>
  </div>
</template>

<script>
  export default {
    name: 'messageBox',
    data(){
      return {
        model: {
          show: ''
        }
      }
    },
    methods: {
      close(state){
        this.model.show = false;
        if(this.model.callback){
          this.model.callback(state);
        }
      },
    }
  }
</script>

<style scoped>

  .messageBox {
    position: fixed;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    border-radius: 4px;
    background-color: #fff;

  }

  .messageBox_header {
    padding: 20px 20px 0;
  }

  .messageBox_header_title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    height: 18px;
    color: #333;
  }

  .messageBox_content {
    padding: 30px 20px;
    color: #48576a;
    font-size: 14px;

  }

  .messageBox_btns {
    padding: 10px 20px 15px;
    text-align: right;
    overflow: hidden;
  }

  .messageBox_btns_default {
    user-select: none;
    float: right;
    padding: 8px 15px;
    border: 1px solid #bfcbd9;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
  }

  .messageBox_btns_default:hover {
    border-color: #1d90e6;
  }

  .messageBox_btns_primary {
    color: #fff;
    background-color: #20a0ff;
    border-color: #20a0ff;
    margin-left: 10px;
  }

  .messageBox_btns_primary:hover {
    background: #4db3ff;
    border-color: #4db3ff;
  }

  .messageBox_model {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
  }

  @keyframes show-messageBox {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;

    }
  }

  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-in .1s reverse;
  }

  @keyframes bounce-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;

    }
  }


</style>

main.js引用：

import alert from './components/messageBox/messageBox.js'
Vue.use(alert);