该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue3后台管理系统(v1.2)

一、组件二次封装(基于ElementPlus)

1.1、Logo组件

import { Logo, LogoProps } from '@/components/Logo';

Logo属性

属性名 说明 类型 默认值
fit 图片如何适应容器 enum cover
src 图标地址(空不显示) String
previewSrcList 图片预览功能 Array <String>
title logo中英标题 Object:{chinese:'',English:"}
wh logo 长/宽 Object:{width:'',height:''}
isTextLogo 是否需要文字Logo Boolean True
align 对齐方式 'justify'|'direction' direction

案例

import { LogoWidgets } from '@/layout/Widgets';

1.2、图标组件

import SvgIcon from '@/components/SvgIcon/index.vue'

属性

属性名 说明 类型 默认值
icon 图标组件/字符串(支持element/阿里/字节); [String, Object]
size 图标大小 String 1rem

1.3、XXX+Button组合组件

1.3.1、普通按钮

import { TooltipButton,DropdownButton,DrawerButton,PopoverButton } from '@/components/Button';

属性

属性名 说明 类型 默认值
content 显示内容(tooltip有效) String
text 按钮文本 String
placement 窗口出现位置(tooltip有效) enum top
type 按钮类型 enum primary
icon 图标(继承图标组件) String
link 是否为链接按钮 Boolean false
options 列表参数(popover有效) Array<any> []
popoverWidth popover窗口宽度(popover有效) [String, Number] 150

事件

事件名 说明 类型
onClick 按钮点击事件 () => void

案例

import { 
  SwitchButtonWidgets, //开关
  ScreenButtonWidgets, //全屏
  DarkButtonWidgets, 	//暗黑模式
  I18nButton,					//国际化
} from '@/layout/Widgets';

tooltip-button

dark-local

quanping

1.3.2、弹窗按钮

import { DialogButton,DrawerButton } from '@/components/Button';

属性

属性名 说明 类型 默认值
title 弹窗标题 String
width 弹窗宽度 [String |number] 520
customClass 自定义弹窗类名 String
btnText 按钮文字 String 打开
btnType 按钮类型 ButtonTypeEnum primary
btnIcon 按钮图标 [String, Object] Plus
btnLink 是否为链接按钮 Boolean false
okText 提交按钮文字 String 确认
okType 提交按钮类型 ButtonTypeEnum primary
okIcon 提交按钮图标 [String, Object] Upload
cancelText 取消按钮文字 String 取消
cancelType 取消按钮类型 ButtonTypeEnum info
cancelIcon 取消按钮图标 [String, Object] Close
direction direction 当弹窗为drawer有效 IDirectionType rtl

回调事件

事件名 说明 类型
onOpen 打开弹窗 () => void
onCancel 点击遮罩层或右上角叉或取消按钮的回调 () => void;
onOk 点击确定回调 (close:()=>void) => void;

插槽

插槽名称 说明
default 弹窗内容
footer 弹窗底部内容

案例

import { SettingButtonWidgets,FormButton } from '@/layout/Widgets';

dialog-button

drawer-button

1.3.3、组按钮

import { GroupButton } from '@/components/Button';

属性

属性名 说明 类型 默认值
GroupItems 组按钮循环渲染函数 Function

案例

const GroupItems = computed<any>(() => {
    return [
        {
            render() {
                return h(FormButton,
                    {
                        items: FormItems.value, data: dataForm,
                        onSubmitClick(data: IRoleForm, close: () => void) {
                            console.log(data);

                        }
                    },
                )
            }
        },
        {
            render() {
                return h(DeleteBatchDelete, {
                    data: {},
                    onOnDeletes() {

                    }
                })
            }
        }
    ]
});

 <GroupButton :GroupItems="GroupItems" />

group-button

1.4、头像组件

import { Avatar, PopoverAvatar } from '@/components/Avatar';

属性

属性名 说明 类型 默认值
align 头像与文字对齐方式 enum('bt','lr') bt
shape 头像形状 enum('circle','square') square
src 头像地址 String
name 头像名称 String
size 头像大小 Number 40
popoverWidth popover宽度(PopoverAvatar有效) Number || String 200

插槽

插槽名 说明
default 自定义popover展示内容

案例

import { AvatarWidgets } from '@/layout/Widgets';

avatar

1.5、菜单

import { Menu } from '@/components/Menu';

import type {IMeta,IRoutes} from '@/types/login/index.d'

Logo属性

属性名 说明 类型 默认值
activePath 当前选中菜单 String
collapse 图标地址(空不显示) Boolean false
menuList 菜单列表 Array<IRoutes> []

案例


import { MenuWidgets} from '@/layout/Widgets';

logo

1.6、Nav导航

import { Nav } from '@/components/Nav';

import type { TabsPaneContext } from 'element-plus';

import type {IMeta,IRoutes} from '@/types/login/index.d'

export type ICommand={

​ label:string,

​ value:string | number | object,

​ icon:any

}

export type IResultCommand={

​ command:string|number,

​ path:string

}

属性

属性名 说明 类型 默认值
activeTab 当前选中路由(菜单) String
tabsHeight 标签栏高度 Number 30
tabList tab动态列表 Array<IRoutes> []
commandOptions 下拉菜单列表 Array []

事件

事件名 说明 类型
tabClick tab单击事件 (pane: TabsPaneContext, ev: Event) => void
tabRemove 单个移除事件 (path: string) => void
handleCommand 下拉菜单选中事件 (command:IResultCommand) => void

案例

import { NavWidgets} from '@/layout/Widgets';

logo

1.7、壁纸

import {Wallpaper} from '@/components/Wallpaper';

Logo属性

属性名 说明 类型 默认值
src 壁纸路径 String

1.8、第三方登录

import ThirdParty from '@/components/ThirdParty/index.vue';

属性

属性名 说明 类型 默认值

案例

import ThirdLogin from './modules/Third.vue';

![logo](./doc/images/ Third.png)

1.9、Form表单

import { InwardForm,InlineForm } from '@/components/Form';

import { IFormItems } from '@/types/index.d';

属性

属性名 说明 类型 默认值
FormItems 表单循环体 Array
data 表单动态数据 Object
ruleForm 校验表单 FormRules
clearable 是否显示清除按钮 Boolean false
labelWidth 标签的长度 String 80px
labelPosition 表单域标签的位置 IPositionType right
customClass 自定义表单class String
formSize 表单大小 ISizeType default

IFormItems属性

属性名 说明 类型 默认值
mode item类型 ModeEnum
span 栅格占据的列数 当inward有效 Object
label 标签文本 string
prop 属性键 string
placeholder 输入框占位文本 String
width 宽度 string
rules 校验 FormRules
options 下拉列表; mode=='select' 生效, Array
maxlength 最大输入长度 number
rows 输入框行数,仅 mode 为 'textarea' 时有效 number
render Function

回调

事件名 说明 类型
onSearch 搜索按钮回调 (data: any, cloase)=>void) => void

ref事件

事件名 说明
resetForm 刷新表单
validateForm 校验表单

案例

import { FormButton } from '@/layout/Widgets';
import { InlineButtonSearch } from '@/components/Form';

form2

空文件

简介

vite2+vue3.0+element-plus,从0开始; 每个阶段对应不同的标签,对应文档; 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化