# 介绍

template-vue2-manage 脚手架提供的模板库。

# 安装

安装 ak-snippets (opens new window) 插件:

安装 wy-vscode-kit (opens new window) 插件:

然后执行 command + shift + P 并输入 wyInitSettings 回车。

最后重启 VSCode 即可。

# 使用

在 vue 文件中创建 table 列表页面:

在 vue 文件中创建 form 表单页面:

在 vue 文件中创建 modal 弹框页面:

# 所有模板

# 页面

  • ak-modal-empty - 空弹框
  • ak-modal-normal - 弹框加单列表单布局
  • ak-modal-complex - 弹框加两列列表单布局
  • ak-drawer-empty - 空抽屉
  • ak-drawer-form - 抽屉加表单布局
  • ak-detail-base - 简单的详情展示
  • ak-detail-common - 通用的详情展示
  • ak-table-base - 简单列表
  • ak-table-drag - 拖拽列表
  • ak-table-middle - 中等列表
  • ak-table-complex - 复杂列表
  • ak-table-tabs-nav - 卡片列表
  • ak-form-page-base - 页面表单结构
  • ak-form-single - 单列的页面表单
  • ak-form-horizontal - 单列左对齐表单
  • ak-form-double - 双列的页面表单
  • ak-form-normal - 三列的页面表单
  • ak-form-complex - 复杂的页面表单
  • ak-form-step-box - 分布表单容器
  • ak-form-step1 - 分布表单 - 第一步
  • ak-form-step2 - 分布表单 - 第二步
  • ak-form-step3 - 分布表单 - 第三步
  • ak-page-default - 空白页面

# 布局

  • ak-layout-query-filter1 - 单行筛选项布局 - 简单
  • ak-layout-query-filter2 - 单行筛选项布局 - 带展开收起
  • ak-layout-card-row1 - 卡片和两行栅格标签
  • ak-layout-card-row2 - 多行栅格标签和操作
  • ak-layout-card-steps - 卡片和进度条

# 组件

  • ak-form-input - a-form-item + a-input
  • ak-form-textarea - a-form-item + a-textarea
  • ak-form-input-number - a-form-item + a-input-number
  • ak-form-select - a-form-item + a-select
  • ak-form-switch - a-form-item + a-switch
  • ak-form-radio - a-form-item + a-radio
  • ak-form-checkbox - a-form-item + a-checkbox
  • ak-form-upload - a-form-item + a-upload
  • ak-form-date-picker - a-form-item + a-date-picker
  • ak-form-range-picker - a-form-item + a-range-picker
  • ak-form-cascader - a-form-item + a-cascader
  • ak-form-model-base - a-form-item + a-model-base

布局和页面可以跟页面搭配使用,更多方式等你来发现~

# GitHub

模板库 GitHub 地址 (opens new window)

最后更新时间: 2022-02-21 13:07:15