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