# 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
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
”属性 开启组件根据媒体查询或组件宽度实现列自适应