用Vue.extend写一个全局使用的Alert

CarterLi 发布于2019-08-26 10:30 / 888人阅读

摘要：由于项目中经常会用到这种组件，平常都是全局注册标签，使用时引入，比较繁琐借鉴别人这种组件一般是在中被调用，中组件主要是使用了标签的形式，现记录通过实现的动态组件官方文档项目预览弹窗组件开发项目目录部分部分移除

由于项目中经常会用到alert这种组件，平常都是全局注册标签，使用时引入，比较繁琐；

借鉴别人这种组件一般是在js中被调用，vue中组件主要是使用了标签的形式，
现记录通过Vue.extend实现的动态组件;
Vue-extend官方文档

项目预览

Alert开发

项目目录

components

alert

alert.vue

index.js

HelloWord.vue

main.js

alert.vue

template部分

JavaScript部分

export default {
  name: "alert",
  data () {
    return {
      message: "this a alert",
      btns: [
        {
          text: "yes",
          click: () => console.log("yes")
        },
        {
          text: "no",
          click: () => console.log("yes")
        }
      ]
    };
  },
  methods: {
    clickFn (event, btn) {
      this.$el.remove(); // 移除DOM
      const {
        click = () => console.warn("请传入回调函数")
      } = btn;
      click(event, btn); // 传递回去
    }
  }
};

css部分

.shade {
  user-select: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shade .mian {
  background: white;
  width: 80%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  animation: open 0.1s;
}
.shade .mian .content {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 20px;
}
.shade .mian .btns {
  height: 45px;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.shade .mian .btns .btn {
  flex: 1 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.shade .mian .btns .btn:last-child {
  border-right: none;
}
.shade .mian .btns .btn:active {
  color: white;
  background-color: rgb(64, 169, 243);
}
@keyframes open {
  0%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.04);
  }
  50% {
    transform: scale(1.06);
  }
}

index.js

import Vue from "vue";
import alert from "./alert.vue";
let MyAlertConstructor = Vue.extend(alert);
let instance;
const MyAlert = (option) => {
  // 创建实例并且过滤参数
  instance = new MyAlertConstructor({
    data: { ...option }
  })
  // 挂载实例
  instance.$mount();
  document.body.appendChild(instance.$el);
  return instance;
}
// 挂载到Vue原型上
Vue.prototype.$alert = MyAlert;

main.js

import "./components/alert"; // 引入注册一下

到这里我们的Alert组件就配置完成了；

如何使用

这里我在 Helloword.vue 中测试使用;

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    Alert() {
      //  使用直之前绑定到原型上的方法
      this.$alert({
        message: "你今天开心吗?",
        btns: [
          {
            text: "开心",
            click: () => {
              // 测试是否可以拿到这边的this
              console.log(this.msg);
            }
          },
          {
            text: "不开心",
            click: (e, btn) => {
              // 这里的event target 可能没用 因为已经移除DOM了
              // 返回btn原来本身
              console.log("不开心", e, btn);
            }
          },
          {
            text: "无回调"
            // 测试一下没有回调函数的时候
          },
          {
            text: "帮助",
            click: this.isOK
          }
        ]
      });
    },
    isOK() {
      console.log("输出帮助");
    }
  }};

项目截图

参考文档

Vue.extend构造函数的使用--实现alert方法

云服务器 GPU云服务器用html写一个秒表用php写一个日志用java写一个单例 alert写html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106294.html

Vue.extend用法（主要用于需要动态渲染的组件，或者类似于window.alert() 提示

摘要：一简单的使用主要用于需要动态渲染的组件，或者类似于提示组件注意创建的是一个组件构造器，而不是一个具体的组件实例属于的全局，在实际业务开发中我们很少使用，因为相比常用的写法使用步骤要更加繁琐一些。最近在重构公司的项目，有些组件想要封装的更灵活，例如toast、loading、messageBox等弹窗组件，模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件； mint-UI的t...

masturbator 2019-08-23 18:35 评论0 收藏0
vue插件开发练习--实用弹窗

摘要：前言上回说了组件组件开发练习焦点图切换的一个练习项目，这次换下口味，说下的插件练手的项目。和组件开发的目录相比，区别就在于这个文件夹上。开发过程把项目跑起来首先，先弄这个组件。最后还需要一个变量，控制弹窗是否显示。 1.前言上回说了组件（vue组件开发练习--焦点图切换）的一个练习项目，这次换下口味，说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件，这个可能就更简单了，基...

muzhuyu 2019-08-22 11:06 评论0 收藏0
vue组件挂载到全局方法

摘要：在最近的项目中，使用了来开发，然而在实际的开发过程中却发现这个提供的组件并不能打到我们预期的效果，像等组件每个页面引入就得重复引入，并不像那样可以通过来调用，那么问题来了，如何通过来调用起我们定义的组件或对我们所使用的框架的组件呢。在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等...

aboutU 2019-08-23 10:35 评论0 收藏0
如何实现全屏遮罩（附Vue.extend和el-message源码学习）

摘要：如何优雅的动态添加这里我们需要用到的实例化，首先我们来看的思路，贴一段源码使用基础构造器，创建一个子类。因为作为一个的扩展构造器，所以基础的功能还是需要保持一致，跟构造器一样在构造函数中初始化。 [Vue]如何实现全屏遮罩（附Vue.extend和el-message源码学习）在做个人项目的时候需要做一个类似于电子相册浏览的控件，实现过程中首先要实现全局遮罩，结合自己的思路并阅读了（...

malakashi 2019-08-26 11:52 评论0 收藏0