视图尺寸
不论是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
- 1export default {
- 2 data() {
- 3 return {
- 4 currentViewSize: null,
- 5 _unwatch: null,
- 6 };
- 7 },
- 8 mounted() {
- 9 this._unwatch = this.$view.$watch('size', () => {
- 10 this.onSize();
- 11 });
- 12 this.onSize();
- 13 },
- 14 beforeDestroy() {
- 15 if (this._unwatch) {
- 16 this._unwatch();
- 17 this._unwatch = null;
- 18 }
- 19 },
- 20 methods: {
- 21 onSize() {
- 22 this.currentViewSize = this.$view.size;
- 23 },
- 24 },
- 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.eb-view-size-small {
- 2 .adaptive-demo {
- 3 font-size: x-small;
- 4 }
- 5}
- 6
- 7.eb-view-size-small.eb-view-size-medium {
- 8 .adaptive-demo {
- 9 font-size: medium;
- 10 }
- 11}
- 12
- 13.eb-view-size-small.eb-view-size-medium.eb-view-size-large {
- 14 .adaptive-demo {
- 15 font-size: x-large;
- 16 }
- 17}
由于.eb-view-size-small
一般情况下是缺省样式,所以我们往往可以将.eb-view-size-small
省略,从而可以简化为:
- 1.adaptive-demo {
- 2 font-size: x-small;
- 3}
- 4
- 5.eb-view-size-medium {
- 6 .adaptive-demo {
- 7 font-size: medium;
- 8 }
- 9}
- 10
- 11.eb-view-size-medium.eb-view-size-large {
- 12 .adaptive-demo {
- 13 font-size: x-large;
- 14 }
- 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 <f7-row>
- 2 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
- 3 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
- 4 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
- 5 <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
- 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
评论: