# vue3后台管理系统

**Repository Path**: lslands/Islands-vue3

## Basic Information

- **Project Name**: vue3后台管理系统
- **Description**: vite2+vue3.0+element-plus,从0开始;
每个阶段对应不同的标签，对应文档;
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2024-07-13
- **Last Updated**: 2024-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite2, vue3, TypeScript

## 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 |

**案例**

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

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

### 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 |

**案例**

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

![tooltip-button](./doc/images/tooltip-button.png)

![dark-local](./doc/images/dark-local.png)

![quanping](./doc/images/quanping.png)

#### 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   | 弹窗底部内容 |

**案例**

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

```

![dialog-button](./doc/images/dialog-button.png)

![drawer-button](./doc/images/drawer-button.png)

#### 1.3.3、组按钮

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

**属性**

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

**案例**

```ts
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](./doc/images/group-button.png)



### 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展示内容 |

**案例**

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

![avatar](./doc/images/avatar.png)

### 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<IMeta>> | []     |

**案例**

```ts

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

```

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

### 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<IMeta>> | []     |
| commandOptions | 下拉菜单列表       | Array<ICommand>       | []     |

**事件**

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

**案例**

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

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

### 1.7、壁纸

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

**Logo属性**

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

### 1.8、第三方登录

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

**属性**

| 属性名 | 说明 | 类型 | 默认值 |
| :----- | ---- | ---- | :----- |

**案例**

```ts
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<IFormItems> |         |
| 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 | 校验表单 |

**案例**

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

```

![](./doc/images/form1.png)

![form2](./doc/images/form2.png)