@wakeadmin/components

Appearance

Return to top
On this page

基本概念

何为 'fat'

Fat 是肥胖的意思。@wakeadmin/components 的定位是一个高级组件库，而不是 element-ui 这类基础组件库。它的目标是覆盖管理后台的 80% 的开发场景，因此，它有以下特征：

  • 组件的粒度更加大。大到一个页面，小到一个页面区域。
  • 遵循“约定大于配置”。 我们期望开发一个页面，只需要少量的配置代码，按照 UI/产品 规范，将大部分交互、数据处理的细节固定下来，做到开箱即用。



何为'原件(Atomic)'

宜搭

原件类似于低代码平台的’组件‘，在 @wakeadmin/components 中，原件 是组成表格 和表单的基本单位。

原件有两种形态：

  • 编辑形态(editable): 用于表单、表格查询等场景
  • 预览形态(preview): 用于详情页，表格等场景


代码示例：

查看代码
vue
<template>
  <div class="wk-demo">
    <el-switch v-model="previewMode" active-text="预览" inactive-text="编辑"></el-switch>

    <FatForm :mode="previewMode ? 'preview' : 'editable'">
      <FatFormItem prop="input" label="文本输入" initial-value="123" />
      <FatFormItem prop="integer" value-type="integer" label="整数输入" :initial-value="456" />
      <FatFormItem prop="date" value-type="date" label="日期输入" />
      <FatFormConsumer>
        <template #default="scope">
          <pre><code>{{ JSON.stringify(scope.values, undefined, 2) }}</code></pre>
        </template>
      </FatFormConsumer>
    </FatForm>
  </div>
</template>

<script setup lang="tsx">
  import { FatForm, FatFormItem, FatFormConsumer } from '@wakeadmin/components';
  import { ref } from 'vue';

  const previewMode = ref(false);
</script>