视图尺寸

不论是Mobile布局还是PC布局,CabloyJS前端会根据当前浏览窗口的尺寸自动调整View视图的尺寸

视图尺寸是以下三种类型之一:smallmediumlarge

CabloyJS前端会自动向View视图对应的Vue组件注入props值,同时向View视图对应的DOM组件注入ClassName,从而我们可以通过JSCSS两种方式进行自适应布局

JS方式

1. 背景说明: Vue组件eb-view

CabloyJS前端使用View视图作为显示内容的容器。一个View可包含多个Page,一个Page包含实际的内容。具体而言,模块a-components提供了一个全局Vue组件eb-view,这个eb-view就是实际的View容器组件

Vue组件eb-view提供了两个props值:sizesizeExtent

名称 说明
size small/medium/large
sizeExtent.width view’s width
sizeExtent.height view’s height

2. 开发举例

我们以模块test-party为例,演示如何响应View视图尺寸的变化

src/module/test-party/front/src/kitchen-sink/pages/layout/adaptive.vue

export default {
  data() {
    return {
      currentViewSize: null,
      _unwatch: null,
    };
  },
  mounted() {
    this._unwatch = this.$view.$watch('size', () => {
      this.onSize();
    });
    this.onSize();
  },
  beforeDestroy() {
    if (this._unwatch) {
      this._unwatch();
      this._unwatch = null;
    }
  },
  methods: {
    onSize() {
      this.currentViewSize = this.$view.size;
    },
  },
};

通过this.$view获取View视图对应的Vue组件实例

CSS方式

1. 背景说明: DOM组件

CabloyJS前端会自动向View视图对应的DOM组件注入ClassName,具体如下:

视图尺寸 ClassName
small .eb-view-size-small
medium .eb-view-size-small.eb-view-size-medium
large .eb-view-size-small.eb-view-size-medium.eb-view-size-large

通过ClassName的组合策略,我们可以很容易的进行自适应布局,同时又能很容易的进行降级处理(当large样式不存在时就使用medium样式,当medium样式不存在时就使用small样式)

2. 开发举例

我们仍以模块test-party为例,演示如何添加自适应样式

src/module/test-party/front/src/kitchen-sink/pages/layout/adaptive.vue

.eb-view-size-small {
  .adaptive-demo {
    font-size: x-small;
  }
}

.eb-view-size-small.eb-view-size-medium {
  .adaptive-demo {
    font-size: medium;
  }
}

.eb-view-size-small.eb-view-size-medium.eb-view-size-large {
  .adaptive-demo {
    font-size: x-large;
  }
}

由于.eb-view-size-small一般情况下是缺省样式,所以我们往往可以将.eb-view-size-small省略,从而可以简化为:

.adaptive-demo {
  font-size: x-small;
}

.eb-view-size-medium {
  .adaptive-demo {
    font-size: medium;
  }
}

.eb-view-size-medium.eb-view-size-large {
  .adaptive-demo {
    font-size: x-large;
  }
}

表格布局

为了简化自适应样式的书写,CabloyJS前端在Framework7 Grid的基础上做了调整,从而支持View视图的自适应机制

  <f7-row>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
  </f7-row>  

f7-col只支持width/medium/large,从而与View视图尺寸相适应

f7-col宽度支持以下数值:5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100