一.引入  svg-sprite-loader 插件 npm install svg-sprite-loader --save-dev vue-cli项目默认情况下会使用 url-loader 对svg进行处理,会将它放在/img 目录下,所以这时候我们引入svg-sprite-loader 会引发一些冲突. //默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader 进行处理. { test: /\.(png|jpe?g|gif|svg…

要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是我们平时写的组件名,打开任何一个文件夹,都有一个src文件夹和一个index.js,src文件夹放组件,index.js用于注册组件 下面来看具体的button源码如何写的: 分析从三个方面着手:DOM结构,数据属性,事件 DOM结构: 按钮的DOM结构很简单,要显示成什么样子就由css样式及一些自…

el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> </div> 结构很简单,这就相当于一个主干,剩下的样式,事件,属性都在这个基础上扩充 属性: 既然是封装,input原生的属性基本上都要覆盖到,个人猜测element团队是按照w3c官方资料来整理的,这样绝对保证不遗漏,这种方式很值得借鉴,如下: // 兼容文本框和文本域的情况 <templat…

参考博客:https://segmentfault.com/a/1190000014384638?utm_source=tag-newest…

(近期给自己立了个小flag,读源码,每周至少读1篇源码) 下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别. 一.文件结构开发主要放在根文件夹下的src下: 1. ivew 文件结构 |--src |--components //所有的UI组件 |--directives |--locale //语言 |--mixins |--styles ... index.less //样式文件 |--utils index.js //入口文件 eleme…

前不久,公司举办了15周年庆,其中添加了一个抽奖环节,要从在读学员中随机抽取幸运学员,当然,这个任务就分到了我这里. 最后的效果如下,启动有个欢迎页面,数据是来自Excel的,点击开始则上面的学号及姓名等信息开始随机滚动,显示区域自适应长度变化等. 点击停止则停止滚动,将抽取的学员信息用Graphics绘制到当前窗体结果区域中:   用到的知识点: 1. DevExpress的GaugeControl的使用 2. DevExpress的TreeList的使用 3. 输入汉字获取其拼音显示 4.…

前言 通过前两篇的介绍,我们知道要执行页面对象的方法,核心就是反射,是从请求获取参数并执行指定方法的过程.实际上这和asp.net mvc框架的核心思想很类似,它会解析url,从中获取controller和action名称,然后激活controller对象,从请求获取action参数并执action.在web form平台上,我们把方法写在.aspx.cs中,要实现的就是在页面对象还未生成的情况下,执行指定的方法,然后返回结果. 我们先看实现后几个调用例子,这些功能也可以组合使用: [AjaxM…

下载源码 技术要点: 1. 天气日历精致UI 2. Android的Http通信技术 3. Android的天气信息解析 4. Android的日历信息的统计 5. Andorid的地理位置的管理 6.源码带有非常详细的中文注释 …… 详细介绍: 1. 天气日历精致UI 此套源码的UI不错,比较精致.实现了天气信息的合理显示,位置的管理以及日历信息的显示 2.Android的Http通信技术 通过Http通信技术与服务器进行通信,动态的更新指定位置天气信息 3.Android的天气信息解析 针对…

  好久没有自己写东西了,chrome有着取之不尽的技术精华供学习,记录一下. 源码目录: http://src.chromium.org/viewvc/chrome/trunk/src/ui/base/accelerators/ 一.Accelerator 类 // This class describe a keyboard accelerator (or keyboard shortcut). // Keyboard accelerators are registered with the…

/** 苏拉克尔塔游戏 * 思路: * 1.棋盘设置:使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件:当页面被点击时,获取点击的x,y像素点,根据此像素点进行判断,再在合适位置绘制黑红棋子,棋子均是使用canvas绘制的 * 3.保存落子记录:将数据存入一个二维数组,x和y表是落子坐标,1为白棋,2为黑棋,0代表此处无棋子,只有没有棋子的才能落子 * 4.判断输赢:每次落子后以此坐标分别向左右,上下,右下,右上进行判断,设参数count,遇到同色棋子+1,遇到空格或不同色棋子终止…