概述

公司技术栈开始用vue主导开发,但因为公司前端会vue的不多所以在项目中用到vue的技术不是很深,之前出去面试被接连打击,而且本来打算开始为公司vue的项目构建自己的组件库所以去下载了iview

源码

打算研究一番,学习大神的组件封装模式和vue的深层技术的运用,随便写博客系列来记录下自己的心得,因为是个人总结所以可能在认识会有点局限也欢迎各路大神一起讨论学习。

iview目录结构

1.assets—图片存放目录

2.build—Webpack配置存放目录

3.dist—打包之后页面存放目录

4.examples—组件的demo页面存放目录

5.src—组件根目录

6.components—组件存放目录

7.directives—组件封装的指令存放目录

8.locale—组件封装的语言配置存放目录

9.mixins—组件封装的混入存放目录

10.styles—组件的样式根目录

11.animation—动画样式

12.common—公共样式

13.components—组件样式

14.mixins—混入样式

15.custom.less—样式公共变量

16.index.less—样式入口

17.utils—组件内部公共方法

18.index.js—组件入口

源码解析

index.js 入口

/**
 * 配置语言、加载组件
 * @param {Object} Vue
 * @param {Object} opts
 */
const install = function(Vue, opts = {}) {
    if (install.installed) return;
    locale.use(opts.locale);
    locale.i18n(opts.i18n);

    Object.keys(iview).forEach(key => {
        Vue.component(key, iview[key]);
    });

    Vue.prototype.$Loading = LoadingBar;
    Vue.prototype.$Message = Message;
    Vue.prototype.$Modal = Modal;
    Vue.prototype.$Notice = Notice;
    Vue.prototype.$Spin = Spin;
};
/**
 * 在浏览器环境下默认加载组件
 */
// auto install
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}
/**
 * 组件vue.user的对象
 */
const API = {
    version: process.env.VERSION, // eslint-disable-line no-undef
    locale: locale.use,
    i18n: locale.i18n,
    install,
    Circle,
    Switch,
    ...components
};

API.lang = (code) => {
    const langObject = window['iview/locale'].default;
    if (code === langObject.i.locale) locale.use(langObject);
    else console.log(`The ${code} language pack is not loaded.`); // eslint-disable-line no-console
};
/**
 * 输出对象
 */
module.exports.default = module.exports = API;   // eslint-disable-line no-undef

在 examples 文件中的 main.js 中加载 iview 组件

知识点:use

vue 的 use 源码:

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
    /**
     * 判断参数fn是fn的话直接运行fn,是对象的话运行对象里的install方法
     * @param {Function|Object} plugin 下面参数类型限制是typescript的写法
     * @returns Vue
     */
  Vue.use = function (plugin: Function | Object) {
    //   判断该方法或对象是否已经注册过
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // 将参数转化为数组
    const args = toArray(arguments, 1)
    // 把vue对象插到数组第一个
    args.unshift(this)
    // 判断plugin对象的install是否是方法
    if (typeof plugin.install === 'function') {
        // 将plugin对象的install执行并且this指向plugin
      plugin.install.apply(plugin, args)
    //   如果plugin是方法
    } else if (typeof plugin === 'function') {
    // 执行plugin方法this指向null
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

看源码我们可以知道在我们以后编写插件的时候可以有两种方式。

一种是将这个插件的逻辑封装成一个对象最后将最后在 install 编写业务代码暴露给 Vue 对象。这样做的好处是可以添加任意参数在这个对象上方便将 install 函数封装得更加精简,可拓展性也比较高。

还有一种则是将所有逻辑都编写成一个函数暴露给 Vue。

其实两种方法原理都一样,无非第二种就是将这个插件直接当成 install 函数来处理。

button组件

button的功能不是很多,主要是样式,所以学习 button 组件大部分时间是看样式。vue 组件在目录:



组件样式目录:





组件样式混入目录:

在分析样式之前我们先去官网上看 iview 按钮组件的大概分了哪种模式和按钮交互上的一些细节。大类上按钮分为单个按钮和按钮组两类。

单个按钮

1).字体居中不换行。

2).默认按钮、幽灵按键 hover 边框颜色和字体颜色改变,过渡效果,主按键 hover 背景颜色变浅20%。

3).所有按键 active 加阴影,阴影颜色和背景色相同,过渡效果。

1.默认按钮、主按键、幽灵按钮、虚线按钮、文字按钮(因为这些种类的按钮在实际用到比较多的是主按键和幽灵按键,所以在自己模拟组件的主要实现了这两张按键)按钮的交互效果:



2.图标按钮



3.按钮组合



更细的分类可以看 iview官网api

iview源码解析(1)的更多相关文章

  1. vue UI库iview源码解析(2)

    上篇问题 在上篇<iview源码解析(1)>中的index.js 入口文件的源码中有一段代码有点疑惑: /** * 在浏览器环境下默认加载组件 */ // auto install if ...

  2. elementUi源码解析(1)--项目结构篇

    因为在忙其他事情好久没有更新iview的源码,也是因为后面的一些组件有点复杂在考虑用什么方式把复杂的功能逻辑简单的展示出来,还没想到方法,突然想到element的组件基本也差不多,内部功能的逻辑也差不 ...

  3. 【原】Android热更新开源项目Tinker源码解析系列之三:so热更新

    本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...

  4. 【原】Android热更新开源项目Tinker源码解析系列之一:Dex热更新

    [原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...

  5. 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新

    上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...

  6. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  7. jQuery2.x源码解析(缓存篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计,jQuery ...

  8. Spring IoC源码解析——Bean的创建和初始化

    Spring介绍 Spring(http://spring.io/)是一个轻量级的Java 开发框架,同时也是轻量级的IoC和AOP的容器框架,主要是针对JavaBean的生命周期进行管理的轻量级容器 ...

  9. jQuery2.x源码解析(构建篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 笔者阅读了园友艾伦 Aaron的系列博客< ...

随机推荐

  1. iOS中分段控制器与UIScrollView结合使用

    指定根视图: // 设置window的根视图控制器 self.window.rootViewController = [[UINavigationController alloc] initWithR ...

  2. UNIX环境高级编程——system V消息队列

    unix早期通信机制中的信号能够传送的信息量有限,管道则只能传送无格式字节流,这远远是不够的.     消息队列(也叫报文队列)客服了这些缺点:     消息队列就是一个消息的链表.     可以把消 ...

  3. JAVA之旅(十一)——RuntimeException,异常的总结,Package,jar包,多线程概述

    JAVA之旅(十一)--RuntimeException,异常的总结,Package,jar包,多程序概述 继续JAVA之旅 一.RuntimeException 在Exception种有一个特殊的子 ...

  4. 程序员的软实力武器-star法则

    hhh 程序员的表达能力一直被诟病,尤其面试讲述自己的项目的时候 下面的star原则能够帮助你: 所谓STAR原则,即Situation(情景).Task(任务).Action(行动)和Result( ...

  5. 【一天一道LeetCode】#48. Rotate Image

    一天一道LeetCode系列 (一)题目 You are given an n x n 2D matrix representing an image. Rotate the image by 90 ...

  6. 09_EGIT插件的安装,Eclipse中克隆(clone),commit,push,pull操作演示

     1 下载EGIT,下载地址:http://www.eclipse.org/egit/download/ 最终的下载地址: http://www.eclipse.org/downloads/dow ...

  7. centos6.5 rsync+inotify实现服务器之间文件实时同步

    1. rsync的优点与不足 与传统的cp.tar备份方式相比,rsync具有安全性高.备份迅速.支持增量备份等优点,通过rsync可以解决对实时性要求不高的数据备份需求,例如定期的备份文件服务器数据 ...

  8. 制药企业BI系统方案整体设计分享

    制药企业全面预算系统蓝图 全面掌控企业的各种业务活动,及时准确的展现它们的状况与趋势,评估其达成的效果.存在的问题与风险.支持数据的导入,多级上报等多种特色功能,同时通过统一的报表平台实现精细话的权限 ...

  9. iwms后台出现从客户端(ctl00$cphMain$logo="<img src="pic/logo.g...")中检测到有潜在危险的 Request.Form 值。错误解决方法

    请将 web.config 文件中httpRuntime 配置节中的 requestValidationMode 特性设置为 requestValidationMode="2.0" ...

  10. ubuntu安装qq教程

    安装策略是wine+wine QQ TM2013,wine QQ TM2013是一款专门为wine进行优化的版本 我的ubuntu系统是14.04版本,64位 1. sudo apt-get inst ...