布局

前言

• 扩展布局组件

1.布局1

<template>
  <web-layout :data="data">
  </web-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const str = ref('222')
const data = ref([
  {
    type: 'web-input',
    model:str,
    component:{
    }
  },
  {
    type: 'web-input',
  },
  {
    type: 'web-input',
  },
  {
    type: 'web-input',
  }
])
</script>

2.布局2

<template>
  <web-layout :data="data">
  </web-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const data = ref([
  {
    type: 'input',
    'value': 2
  },
  {
    type: 'web-input',
    value: 299
  },
  {
    type: 'web-input',
    value: 266
  }
])
</script>

3.布局3

234234

94545

<template>
  <web-layout :data="data">
    <template #default="{name,value}">
      <component :is="name" v-text="value"></component>
    </template>
  </web-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const data = ref([
  {
    name: 'div',
    value: 234234
  },
  {
    name: 'span',
    value: 94545
  },
  {
    name: 'button',
    value: 233
  }
])
</script>

4.布局4

<template>
  <web-row>
    <web-col :span="24"><div class="grid-content ep-bg-purple-dark" /></web-col>
  </web-row>
  <web-row>
    <web-col :span="12"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="12"><div class="grid-content ep-bg-purple-light" /></web-col>
  </web-row>
  <web-row>
    <web-col :span="8"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="8"><div class="grid-content ep-bg-purple-light" /></web-col>
    <web-col :span="8"><div class="grid-content ep-bg-purple" /></web-col>
  </web-row>
  <web-row>
    <web-col :span="6"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="6"><div class="grid-content ep-bg-purple-light" /></web-col>
    <web-col :span="6"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="6"><div class="grid-content ep-bg-purple-light" /></web-col>
  </web-row>
  <web-row>
    <web-col :span="4"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="4"><div class="grid-content ep-bg-purple-light" /></web-col>
    <web-col :span="4"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="4"><div class="grid-content ep-bg-purple-light" /></web-col>
    <web-col :span="4"><div class="grid-content ep-bg-purple" /></web-col>
    <web-col :span="4"><div class="grid-content ep-bg-purple-light" /></web-col>
  </web-row>
</template>

<style lang="scss">
.web-row {
  margin-bottom: 20px;
}
.web-row:last-child {
  margin-bottom: 0;
}
.web-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.ep-bg-purple-dark {
  background: #99a9bf;
}
.ep-bg-purple {
  background: #d3dce6;
}
.ep-bg-purple-light {
  background: #e5e9f2;
}
</style>