crane-element

Crane-Element 🏗️

Crane-Element 是一个基于 Vue 3、Vite、TypeScript 和 Element Plus 的二次封装项目。它提供了动态表单、动态表格、命令式弹窗和命令式抽屉（drawer）等功能，并为这些功能提供了各类动画效果。

功能特点

• 💡 提供动态表单功能，让表单创建更加灵活和便捷。
• 📊 提供动态表格功能，使表格的展示和操作更加动态化。
• 📢 提供命令式弹窗和命令式抽屉功能，方便进行信息提示和展示。
• 🎨 提供各类动画效果，为用户界面带来更好的体验。

安装

1. 确保已安装 Vue 3 和 Vite。
2. 克隆项目并进入项目目录。
3. 需要安装element-plus
4. 运行 npm install 命令安装依赖。
5. 运行 npm run dev 命令启动开发服务器。
6. 在浏览器中打开 http://localhost:3000(对应地址)，即可查看项目效果。

使用方法

<template>
  <CraneForm :schema="schema" mode="default" @formSubmit="submit" />
</template>

<script setup lang="ts">
  import { CraneSchema } from '../../../packages/components/CraneForm/types';
  import CraneForm from '../../../packages/components/CraneForm/CraneForm.vue';

  const schema: CraneSchema = {
    properties: {
      phone: {
        type: 'string',
        title: '手机号',
        format: 'mobile'
      },
      password: {
        type: 'password',
        title: '密码'
      },
      email: {
        type: 'string',
        title: '邮箱',
        format: 'email'
      },
      name: {
        type: 'string',
        title: '姓名'
      }
    }
  };

  function submit(e: any) {
    console.log(e);
  }
</script>

<style scoped></style>

<template>
  <CraneTable
    :pages="data.pages"
    data="/api/v1.0/menu/menuList"
    :axios-instance="service"
    :column="data.column"
  />
</template>

<script setup lang="ts">
  import CraneTable from '../../../packages/components/CraneTable/CraneTable.vue';
  import { reactive } from 'vue';
  import { TableColumn } from '../../../packages/components/CraneTable/types';
  import service from '../../../src/http/request';

  const data = reactive({
    column: [
      {
        title: '序号',
        width: 80,
        type: 'index'
      },
      {
        title: '菜单名称',
        key: 'name',
        align: 'center'
      },
      {
        title: '路径',
        key: 'path'
      },
      {
        title: '排序',
        key: 'orderNumber'
      },
      {
        title: '操作',
        buttons: [
          {
            text: '查看',
            click: (row: any) => {
              console.log(row);
            }
          }
        ]
      }
    ] as TableColumn[],
    pages: { pageNum: 1, pageSize: 5 },
    tableData: [
      {
        name: '张三',
        path: '/zhang-san',
        orderNumber: 1
      },
      {
        name: '李四',
        path: '/li-si',
        orderNumber: 2
      },
      {
        name: '李四',
        path: '/li-si',
        orderNumber: 2
      },
      {
        name: '李四',
        path: '/li-si',
        orderNumber: 2
      }
    ]
  });
</script>

<style scoped></style>