视图布局组件，可以定义上、左、右的布局，用于统一布局。

基础示例

注意事项：

1. EView组件通过配置template="top-left-right"属性来确定布局模式。
2. 其中slot="top"和slot="middle"为可选固定插槽。
3. 另外可以通过配置config属性来定义leftTabs和rightTabs中的内容。
4. config中配置的leftTabs和rightTabs可定义多个tab集合，每个tab的id可作为solt的插槽来自定义内容。

<template>
  <EBlock class="e-view-showcase">
    <EBlock style="font-size: 20px; margin: 10px;">
      EView template="top-left-right"
    </EBlock>
    <EBlock style="width: 550px; border: 1px solid #aaa; margin: 10px;">
      <EView template="top-left-right" :config="config" @active-tabs="onActiveTabs">
        <EBlock slot="top" class="applet" align="center">
          Top
        </EBlock>
        <EBlock slot="middle" class="applet" align="center">
          Middle
        </EBlock>
        <EBlock slot="related" class="applet" align="center">
          Related
        </EBlock>
        <EBlock slot="detail" class="applet" align="center">
          Detail
        </EBlock>
        <EBlock slot="activity" class="applet" align="center">
          Activity
        </EBlock>
        <EBlock slot="test" class="applet" align="center">
          test
        </EBlock>
      </EView>
      <EButton style="margin: 10px;" @click="onclick">
        切换左侧默认 Tab
      </EButton>
    </EBlock>
  </EBlock>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      isEditable: false,
      config: {
        leftTabs: [
          { id: 'related', name: '相关', active: this.$route.query.tab === 'related' },
          { id: 'detail', name: '详细信息', active: this.$route.query.tab === 'detail' }
        ],
        rightTabs: [
          { id: 'activity', name: '活动' },
          { id: 'test', name: '测试' }
        ],
      },
    };
  },
  watch: {
    $route: {
      handler() {
        if (this.$route.query.tab === 'detail') {
          this.config.leftTabs.find(t => t.id === 'related').active = false;
          this.config.leftTabs.find(t => t.id === 'detail').active = true;
        } else {
          this.config.leftTabs.find(t => t.id === 'related').active = true;
          this.config.leftTabs.find(t => t.id === 'detail').active = false;
        }
      },
      deep: true,
    },
  },
  methods: {
    onclick() {
      const nextTab = this.$route.query.tab === 'detail' ? 'related' : 'detail';
      this.$router.push({ query: { tab: nextTab } });
    },
    onActiveTabs(value) {
      console.log('selected tabs: ', value);
    },
  },
};
</script>
<style>
.e-view-showcase .applet {
  width: 100%;
  height: 200px;
  background: #ddd;
}
</style>

EViewTopLeftRight

Props

Name	Description	Type	Required	Default
config	-	Object	false	-

Events

Event Name	Description	Parameters
active-tabs	-	-

Slots

Name	Description	Default Slot Content
top	-	-
middle	-	-
tab.id	-	-
tab.id	-	-