组件化示例

组件化示例

elementui this.$message 如何实现

将 Message 方法赋值给 Vue.prototype.$message：Vue.prototype.$message = Message;这样每个 Vue 组件（都继承于 Vue）都能获取到 $message 方法了

Message 方法实现

index.js

核心代码：import Vue from \"vue\";import Main from \"./main.vue\";let MessageConstructor = Vue.extend(Main); // 使用基础 Vue 构造器，创建一个“子类” instance = new MessageConstructor({  data: options }); instance.$mount(); document.body.appendChild(instance.$el); instance.visible = true;return instance;};export default Message;

完整代码：import Vue from \"vue\";import Main from \"./main.vue\";import { isVNode } from \"learn-element-ui/utils/vdom\";import { PopupManager } from \"learn-element-ui/utils/popup\";let MessageConstructor = Vue.extend(Main); // 使用基础 Vue 构造器，创建一个“子类”let instance;let instances = [];const Message = function(options) { if (Vue.prototype.$isServer) return; options = options || {}; if (typeof options === \"string\") { options = { message: options }; } instance = new MessageConstructor({  data: options }); // vueInstance.$message({message: VNode}) if (isVNode(instance.message)) {  instance.$slots.default = [instance.message];  instance.message = null; } instance.$mount(); document.body.appendChild(instance.$el); // 多个 message 同时出现，其距离顶部的高度需要叠加 let verticalOffset = options.offset || 20; instances.forEach(item => { // HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 // 这里16是message之间的距离，verticalOffset是最上面一个message距离顶部的距离 verticalOffset += item.$el.offsetHeight + 16; }); instance.verticalOffset = verticalOffset;font color=\"#0076b3\

其他功能点

支持 vueInstance.$message({message: VNode}) 的用法多个 message 同时出现，其距离顶部的高度需要叠加管理所有弹层组件的 index (PopupManager)

main.vue

<template> <transition name=\"my-message-fade\"> <div :class=\

代码地址

/Users/lucy/code/learn-code/learn-element-ui/src/learn_element_ui/packages/message/index.js

购物车动画组件（将购物车的动画单独提取出来抽象为一个组件。在清华大学的《软件工程》课中，过程不能定义为对象。这里是将某一种过程抽象成组件。）

位置移动实现

js 钩子动画

/Users/lucy/IT技术教程课件/开课吧前端教程/全栈课程/2 vue/05课 vue电商项目实战第二节 （2019.5.14）/vue-mart(1)/src/components/CartAnim.vue：<transition @before-enter=\"beforeEnter\" @enter=\"enter\" @afterEnter=\"afterEnter\"> <div class=\"ball\" v-show=\"show\" :style=\"pos\"> <div class=\"inner\"> <div class=\"cubeic-add\"></div> </div> </div> </transition>

这里用了 flip 动画的思想：小球的初始位置是最终目的地，即购物车；beforeEnter 钩子中将小球移动到点击事件发生的添加物品的图标位置；enter 钩子中再将小球复原；afterEnter 中做清理工作

start

start(el) { // 启动动画接口，传递点击按钮元素 this.el = el;// font color=\"#16884a\

 start 函数很简单，只是将 show 赋值为 true，这样就能触发动画钩子了，动画逻辑都是在动画钩子函数中进行的

beforeEnter

beforeEnter(el) { // 把小球移动到点击的dom元素所在位置 const rect = this.el.getBoundingClientRect(); // 转换为用于绝对定位的坐标 const x = rect.left - window.innerWidth / 2; const y = -(window.innerHeight - rect.top - 10 - 20);  // ball只移动yfont color=\"#924517\

enter

font color=\"#16884a\

afterEnter

afterEnter(el) { // 动画结束，开始清理工作 this.show = false; el.style.display = \"none\"; this.$emit(\"transitionend\"); }

抛物线动画

外层元素移动 y

内层元素移动 x

transition: all 0.5x linear;

不能是单例

使用起来要方便

类似 this.$alert('hh') 的使用方式

动态全局组件

开课吧前端教程/全栈课程/2 vue/05课 vue电商项目实战第二节 （2019.5.14）/vue-mart(1)/src/utils/create.js：import Vue from 'vue';export default function(font color=\"#924517\

使用

Vue.prototype.$create = create;

import CartAnim from '@/components/CartAnim.vue'startCartAnim(el) {b style=\

参考资料

/Users/lucy/IT技术教程课件/开课吧前端教程/全栈课程/2 vue/05课 vue电商项目实战第二节 （2019.5.14）/vue-mart(1)/src/components/CartAnim.vue