视图尺寸

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

视图尺寸是以下三种类型之一：small、medium、large

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

JS方式

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

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

Vue组件eb-view提供了两个props值：size、sizeExtent

名称 说明
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