crane-element
v2.0.22
Published
Crane-Element 是一个基于 Vue 3、Vite、TypeScript 和 Element Plus 的二次封装项目。它提供了动态表单、动态表格、命令式弹窗和命令式抽屉(drawer)等功能,并为这些功能提供了各类动画效果。
Downloads
19
Readme
Crane-Element 🏗️
Crane-Element 是一个基于 Vue 3、Vite、TypeScript 和 Element Plus 的二次封装项目。它提供了动态表单、动态表格、命令式弹窗和命令式抽屉(drawer)等功能,并为这些功能提供了各类动画效果。
功能特点
- 💡 提供动态表单功能,让表单创建更加灵活和便捷。
- 📊 提供动态表格功能,使表格的展示和操作更加动态化。
- 📢 提供命令式弹窗和命令式抽屉功能,方便进行信息提示和展示。
- 🎨 提供各类动画效果,为用户界面带来更好的体验。
安装
- 确保已安装 Vue 3 和 Vite。
- 克隆项目并进入项目目录。
- 需要安装element-plus
- 运行
npm install
命令安装依赖。 - 运行
npm run dev
命令启动开发服务器。 - 在浏览器中打开
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>