iview source code analysis (1)

Overview

The company's technology stack began to use Vue to lead the development, but because the company's front-end does not know much about Vue, the use of Vue technology in the project is not very deep. Before going out for interviews, I was attacked one after another, and I planned to start building my own for the company's Vue project. Component library so I downloaded the source code of iview and planned to study it, learn the component encapsulation mode of the great god and the application of the deep technology of vue, and write a blog series to record my own experience. Because it is a personal summary, it may be a little limited in understanding. You are also welcome to discuss and learn together.

iview directory structure

1.assets—image storage directory

2.build—Webpack configuration storage directory

3.dist—page storage directory after packaging 4.examples—

component demo page storage directory

5.src—component root directory

6.components—component storage directory

7. directives—directory storage directory for component encapsulation 8.locale —

language configuration storage directory

for component encapsulation 13.components—component styles 14.mixins—mixed styles 15.custom.less—style public variables 16.index.less—style entry 17.utils—component internal public methods 18.index.js—component entry

Source code analysis

index.js entry

/**
 * 配置语言、加载组件
 * @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

Load the iview component in main.js in the examples file

Knowledge point: use

Vue's use source code:

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
  }
}

Looking at the source code, we can know that there are two ways when we write plugins in the future.
One is to encapsulate the logic of this plugin into an object and finally expose the business code written in install to the Vue object. The advantage of this is that you can add any parameters to this object to make the install function more compact and expandable.
Another is to write all the logic as a function and expose it to Vue.
In fact, the principle of the two methods is the same, but the second is to directly treat the plugin as an install function.

button component

The function of the button is not many, mainly the style, so most of the time to learn the button component is to look at the style. The vue component is in the directory:



component style directory:




component style mixin directory:

Before analyzing the style, let's go to the official website to see which mode the iview button component is roughly divided into and some details on the button interaction. The buttons on the main category are divided into two categories: single button and button group.

single button

1). The font is centered and does not wrap.

2). The border color and font color of the default button and ghost button hover are changed, and the transition effect, the background color of the main button hover is 20% lighter.

3). Shadows are added to all keys active, the shadow color is the same as the background color, and the transition effect is achieved.

1. Default button, main button, ghost button, dotted button, text button (because these types of buttons are actually used more than the main button and ghost button, so these two buttons are mainly implemented in the simulation component) The interaction effect of the button:



2. Icon button



3. Button combination For



a more detailed classification, you can see the iview official website api .