vue的自定义alert插件

最新推荐文章于 2024-09-14 02:26:09 发布

神烦大人

最新推荐文章于 2024-09-14 02:26:09 发布

阅读量596

点赞数

分类专栏：工具箱文章标签： vue.js javascript es6

本文链接：https://blog.youkuaiyun.com/lifachang/article/details/116504963

版权

工具箱专栏收录该内容

15 篇文章

订阅专栏

本文展示了如何创建一个名为mAlert的Vue组件，该组件用于弹出提示框，包含确认和取消按钮。组件接受配置对象，允许自定义提示信息和按钮文字。同时，mAlert.js文件中定义了一个安装方法，将mAlert集成到Vue应用中，通过Vue.prototype.$mAlert方法调用。在main.js中引入并使用，然后在实例中捕获用户点击确定或取消的响应。

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

目录结构：
在这里插入图片描述
mAlert.vue的代码：

<template>
  <div id="mAlert" v-show="showAlert">
    <div class="box">
      <p>{{config.txt}}</p>
      <div>
        <span @click="ok()">{{config.okTxt || '确定'}}</span>
        <span @click="no()">{{config.noTxt || '取消'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mAlert.vue",
    props: {
      config: {
        type: Object,
        default: function () {
          return {
            txt: '',
            okTxt: '确定',
            noTxt: '取消'
          }
        }
      }
    },
    data () {
      return {
        showAlert: false
      }
    },
  }
</script>

<style scoped>
  #mAlert{
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
  }
  .box{
    width: 61.8%;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    margin: 30% auto 0;
  }
  .box p{
    padding: 20px;
  }
  .box div{
    display: flex;
    border-top: 1px solid #ccc;
  }
  .box span{
    flex: 1;
    padding: 10px;
  }
  .box span:first-child{
    border-right: 1px solid #ccc;
    color: dodgerblue;
  }
</style>

mAlert.js的代码：

import mAlertDom from './mAlert.vue'
import Vue from 'vue'

let mAlert = {}

mAlert.install = function (Vue, options) {
  const constructor = Vue.extend(mAlertDom)
  const instance = new constructor()
  Vue.prototype.$mAlert = (config) => {
    return new Promise((resolve, reject) => {
      instance.config = config
      instance.showAlert = true
      instance.no = () => {
        instance.showAlert = false
        reject(false)
      }
      instance.ok = () => {
        instance.showAlert = false
        resolve(true)
      }
    })
  }
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
}
export default mAlert

main.js引入并use:

import mAlert from "./plugin/mAlert/mAlert.js"
Vue.use(mAlert)

调用：

this.$mAlert({txt: '又在写bug？'}).then((res) => {
        console.log(res) // 点击了确定按钮
      }).catch((err) => {
        console.log(err) // 点击了取消按钮
      })