视图尺寸

不论是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/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/layout/adaptive.vue

  1. 1export default {
  2. 2 data() {
  3. 3 return {
  4. 4 currentViewSize: null,
  5. 5 _unwatch: null,
  6. 6 };
  7. 7 },
  8. 8 mounted() {
  9. 9 this._unwatch = this.$view.$watch('size', () => {
  10. 10 this.onSize();
  11. 11 });
  12. 12 this.onSize();
  13. 13 },
  14. 14 beforeDestroy() {
  15. 15 if (this._unwatch) {
  16. 16 this._unwatch();
  17. 17 this._unwatch = null;
  18. 18 }
  19. 19 },
  20. 20 methods: {
  21. 21 onSize() {
  22. 22 this.currentViewSize = this.$view.size;
  23. 23 },
  24. 24 },
  25. 25};

通过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/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/layout/adaptive.vue

  1. 1.eb-view-size-small {
  2. 2 .adaptive-demo {
  3. 3 font-size: x-small;
  4. 4 }
  5. 5}
  6. 6
  7. 7.eb-view-size-small.eb-view-size-medium {
  8. 8 .adaptive-demo {
  9. 9 font-size: medium;
  10. 10 }
  11. 11}
  12. 12
  13. 13.eb-view-size-small.eb-view-size-medium.eb-view-size-large {
  14. 14 .adaptive-demo {
  15. 15 font-size: x-large;
  16. 16 }
  17. 17}

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

  1. 1.adaptive-demo {
  2. 2 font-size: x-small;
  3. 3}
  4. 4
  5. 5.eb-view-size-medium {
  6. 6 .adaptive-demo {
  7. 7 font-size: medium;
  8. 8 }
  9. 9}
  10. 10
  11. 11.eb-view-size-medium.eb-view-size-large {
  12. 12 .adaptive-demo {
  13. 13 font-size: x-large;
  14. 14 }
  15. 15}

表格布局

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

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/view/sizeSmall.vue

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/view/sizeMedium.vue

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/view/sizeLarge.vue

  1. 1 <f7-row>
  2. 2 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
  3. 3 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
  4. 4 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
  5. 5 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
  6. 6 </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