qq_27009517的博客

利用vue自定义指令directive实现拖动elementUI的dialog<template> <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" v-dialogDrag="{ x: transformX, y: transformY }" :close-on-click-modal="false" :append-to-body="true" :modal-append-to-body="true">...

PS D:\vue-example\sound-player-vuejs> npm install element-uinpm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in ol.

动机感觉现在的业务开发，如果不是很特殊的需求，基本都能在对应的组件库内找到组件使用，这样编写代码就成了调用组件，但是却隐藏了组件内的思想，因此弱化了编程能力，所以我想写这么个分析系列来鞭策自己深入分析组件的原理，提高代码阅读理解能力，我觉得一定要记下点什么来，如果只是看不动笔感觉很快就忘了，因此准备持续写这么个分析Element源码结构官网传送门点此, 主要目录如下图其中组件的源码放在package目录下，src中是一些工具函数(某些组件都会使用这些函数)和国际化相关的代码，进入.

Layout 布局row布局组件中的父组件，用于控制子组件。很简单的一个布局标签，主要通过 justify 和 align 控制子元素的对齐方式，使用 render 函数通过传入的 tag 属性控制生成的标签。在这里推荐学习下 render 函数和 JSX 的写法，因为之后比较复杂的组件都是通过 render函数 + JSX 的方式来写的。// 核心代码render(h) { return h(this.tag, { class: [ 'e

ElementUI 作为当前运用的最广的 Vue PC 端组件库，很多 Vue 组件库的架构都是参照 ElementUI 做的。作为一个有梦想的前端（咸鱼），当然需要好好学习一番这套比较成熟的架构。目录结构解析首先，我们先来看看 ElementUI 的目录结构，总体来说，ElementUI 的目录结构与vue-cli2相差不大：.github：存放贡献指南以及 issue、PR 模板，这些是一个成熟的开源项目必须具备的。 build：毫无疑问，看文件夹名称就知道是存放打包工具的配置文件。..