摘要：第二集从零开始实现组件本集定位这套组件我本来是先从做的但是我发现每个组件都要用到这个组件如果没有他很多组件没法扩展而且本身不依赖其他组件所以还是先把它作为本篇文章的重点吧组件读过源码的同学都知道他们选择的是字体图标的方式来做组件的而我的这
第二集: 从零开始实现(icon组件)
本集定位:
这套ui组件我本来是先从button做的, 但是我发现每个组件都要用到icon这个组件, 如果没有他, 很多组件没法扩展, 而且icon本身不依赖其他组件, 所以还是先把它作为本篇文章的重点吧.
icon组件
读过element-ui源码的同学都知道, 他们选择的是字体图标的方式来做icon组件的, 而我的这套ui在写法与用法上参考了他们的做法, 但组件本身是靠svg来书写的,其中的区别还是简单阐述一下把.
icon font 与 svg
1.icon font做为字体无法支持多色图形，这就很尴尬了.
2.icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好.
3.icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的，SVG上面我说过它是图形所以在浏览器中使用的是图形渲染，所以SVG却没有这种问题.
4.兼容性较差，支持 ie9+,及现代浏览器.
5.浏览器渲染svg的性能一般，还不如png。
行动起来
上一集基本环境已经搭建好了, 这里我们采用"bem"的思想, 来构建组件的样式, 所有的样式抽离在一个文件夹里面, 做到组件本身没有样式代码,我们来先书写组件的代码.结构如下:
index.js文件里面是导出这个组件:
import Icon from "./main/icon.vue"
// 明白vue.use方法原理的同学都能明白这段代码的意义
// 当被use的时候, 进行icon组件的渲染
Icon.install = function(Vue) {
Vue.component(Icon.name, Icon);
};
export default Icon
这样单抽出来做一个文件的好处是,更好的工程化, 保证职能的单一性.
main文件夹
为什么main文件夹里面只有一个文件还要多带带抽成一个文件夹??, 原因是有的组件可能要配合自己独有的容器组件一起使用, 比如一个button的包裹容器, 他可以让内部的每个button有相同的上下左右距离, 相同的圆角等等...
icon.vue文件
第一步: 使用svg, 当然要去下载svg图片了, 本篇推荐使用大家都在用的阿里巴巴矢量图标库,选择自己喜欢的图标放入购物车选项.
第二步: 放入工程,点击添加入项目, 如果没有项目要点击新建项目来完成此操作.
第三步: 复制链接到你的script标签里面引入, 在index.html里面就可以, 下面会讲遇到的问题与优化.
// 使用方法如下:
第四步: 开始正式书写组件.
1:先定义一个最简单的组件模板, 他仅仅支持颜色的调整, 与icon的调整
2:svg的颜色控制, 需要通过fill属性, 我经常面试遇到说自己用过svg图片, 但是没听说过fill属性的尴尬场面
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114498.html
摘要：第二集从零开始实现组件本集定位这套组件我本来是先从做的但是我发现每个组件都要用到这个组件如果没有他很多组件没法扩展而且本身不依赖其他组件所以还是先把它作为本篇文章的重点吧组件读过源码的同学都知道他们选择的是字体图标的方式来做组件的而我的这 第二集: 从零开始实现(icon组件) 本集定位: 这套ui组件我本来是先从button做的, 但是我发现每个组件都要用到icon这个组件, 如...
摘要：第二集从零开始实现组件本集定位这套组件我本来是先从做的但是我发现每个组件都要用到这个组件如果没有他很多组件没法扩展而且本身不依赖其他组件所以还是先把它作为本篇文章的重点吧组件读过源码的同学都知道他们选择的是字体图标的方式来做组件的而我的这 第二集: 从零开始实现(icon组件) 本集定位: 这套ui组件我本来是先从button做的, 但是我发现每个组件都要用到icon这个组件, 如...
摘要：第十二集从零开始实现单元测试聊聊测试本次我会与大家分享一下我学测试时候记的笔记知识以及本次项目里面做的几个测试前端代码的单元测试与集成测试属于雷声大雨点小很多人一提到它都说是个好东西试问又有几个公司的项目是严格要求跑单元测试与集成测试的那测 第十二集: 从零开始实现( jest单元测试 ) 1.聊聊测试 本次我会与大家分享一下我学测试时候记的笔记知识以及本次项目里面做的几个测试...
摘要：第四集从零开始实现组件本集定位之前一直在忙别的事情现在终于闲下来好好把这个库的文章写一下本篇目的是承接上文把组件的功能全部实现为添加按钮的很重要现在一般的按钮都带个图案因为这样符合人脑的快捷思维方便理解与记忆图标按钮 第四集: 从零开始实现(button组件2) 本集定位: 之前一直在忙别的事情, 现在终于闲下来, 好好把这个库的文章写一下 本篇目的是承接上文, 把button组...
摘要：第四集从零开始实现组件本集定位之前一直在忙别的事情现在终于闲下来好好把这个库的文章写一下本篇目的是承接上文把组件的功能全部实现为添加按钮的很重要现在一般的按钮都带个图案因为这样符合人脑的快捷思维方便理解与记忆图标按钮 第四集: 从零开始实现(button组件2) 本集定位: 之前一直在忙别的事情, 现在终于闲下来, 好好把这个库的文章写一下 本篇目的是承接上文, 把button组...
阅读 696·2023-04-25 23:59
阅读 3359·2021-10-08 10:04
阅读 1569·2019-08-30 14:05
阅读 889·2019-08-30 13:58
阅读 367·2019-08-29 18:41
阅读 994·2019-08-29 17:15
阅读 2233·2019-08-29 14:13
阅读 2643·2019-08-29 13:27
