vant源码分析--col、row组件

vant中col和row组件能完成layout布局，来进行行列布局。

row组件目录结构

src
└─ row
   ├─ index.js         # 组件入口
   ├─ index.less       # 组件样式

index.js组件入口

还是引入createNamespace函数并调用，createNamespace函数返回三个函数，在这里接收了其中两个函数。

import { createNamespace } from '../utils';

const [createComponent, bem] = createNamespace('row');

调用createComponent函数传入组件具体配置并向外导出其结果

export default createComponent({
  // 在实际开发中，调用组件的props传值
  props: {
    type: String,
    align: String,
    justify: String,
    // 指定传值数据类型，并设置默认值为div	
    tag: {
      type: String,
      default: 'div'
    },
    gutter: {
      type: [Number, String],
      default: 0
    }
  },
  // row自带的方法
  methods: {
    // 监听点击方法并发布
    onClick(event) {
      this.$emit('click', event);
    }
  },
  // rander函数返回html的dom
  render() {
   
    const { align, justify } = this;
    // 判断布局方式是否是flex
    const flex = this.type === 'flex';
    // 计算每一项的向外边距值
    const margin = `-${Number(this.gutter) / 2}px`;
    // 组件的style值，根据props的align值改变
    const style = this.gutter ? { marginLeft: margin, marginRight: margin } : {};
	// 返回改组件的html
    return (
      <this.tag
        style={style}
        // bem根据参数生成class类名
        class={bem({
          flex,
          [`align-${align}`]: flex && align,
          [`justify-${justify}`]: flex && justify
        })}
        onClick={this.onClick}
      >
        // 插槽
        {this.slots()}
      </this.tag>
    );
  }
});
  

col组件目录结构

src
└─ col
   ├─ demo             # 示例代码
   ├─ test             # 单元测试
   ├─ index.js         # 组件入口
   ├─ index.less       # 组件样式
   ├─ README.md        # 英文文档
   └─ README.zh-CN.md  # 中文文档

index.js组件入口

还是引入createNamespace函数并调用它返回三个函数，col组件接收其中的两个函数

import { createNamespace } from '../utils';

const [createComponent, bem] = createNamespace('col');

调用createComponent函数传入组件具体配置并向外导出其结果

// 调用createComponent传入参数也就是组件的具体配置
export default createComponent({
  // 调用组件时的props传值，具体传值方式查看vant官方组件api
  props: {
    span: [Number, String],
    offset: [Number, String],
    tag: {
      type: String,
      default: 'div'
    }
  },
  // 组件的计算属性
  computed: {
    // this.$parent能获取到父组件和父组件的中的属性
    gutter() {
      return (this.$parent && Number(this.$parent.gutter)) || 0;
    },
    // 计算组件的style
    style() {
      const padding = `${this.gutter / 2}px`;
      // 如果this.gutter存在返回表达式1；如不存在返回{}
      return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
    }
  },

  methods: {
    onClick(event) {
      this.$emit('click', event);
    }
  },
  // render函数返回组件的dom -- html
  render() {
    const { span, offset } = this;
    return (
      <this.tag
        // 组件的style属性是计算属性style
        style={this.style}
        // class类名是bem方法返回符合bem规范的类名
        class={bem({ [span]: span, [`offset-${offset}`]: offset })}
        onClick={this.onClick}
      >
        {this.slots()}
      </this.tag>
    );
  }
});