# ResponsiveCol Mixin

# 描述:

让组件根据媒体查询或自身宽度实现列布局自适应

# 使用事例:

引入 responsiveCol.js (import responsiveCol from '$ui/utils/responsive-col'), 并在组件中注册即可。

import responsiveCol from '$ui/utils/responsive-col'
export default { 
  mixins: [responsiveCol]
}
1
2
3
4

responseColMixins 注册后,组件可接收两个“props”: listenEl columns

listenEl 是否开启监听组件自身宽度来进行自适应列布局(默认为否), 为否时以媒体查询来控制

columns 组件的默认列,默认为3列,也可以传入断点的json如:

{
  xxl: 8,
  xl: 6,
  lg: 4,
  md: 3,
  sm: 2,
  xs: 1
}
1
2
3
4
5
6
7
8

mixin注册后,组件可以根据“currentColumn”的值(data)来输出组件的列数

# MyUI事例

以下为本框架中使用responsiveColMixin 的组件

# MyCard事例

通过配置“listen-el”属性 开启组件根据媒体查询或组件宽度实现列自适应

# MyWaterFall事例

通过配置“listen-el”属性 开启组件根据媒体查询或组件宽度实现列自适应

# KeyValList

通过配置“listen-el”属性 开启组件根据媒体查询或组件宽度实现列自适应

# MyFilter事例

通过配置“listen-el”属性 开启组件根据媒体查询或组件宽度实现列自适应