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

1. Компоненты вторичной упаковки (на основе ElementPlus)

1.1. Компонент логотипа

import { Logo, LogoProps } from '@/components/Logo'; Параметры логотипа | Имя параметра | Описание | Тип | Значение по умолчанию | | :--------------------- | :---------------------- | :--------------------------- | :----------------------- | | fit | Как изображение подходит к контейнеру | enum | cover | | src | Адрес изображения логотипа (пустое значение не отображается) | String | | | previewSrcList | Функция предварительного просмотра изображения | Array <String> | | | title | Заголовок логотипа на китайском и английском языках | Object:{chinese:'',English:"} | | | wh | Длина/ширина логотипа | Object:{width:'',height:''} | | | isTextLogo | Необходимость текстового логотипа | 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. Компонент кнопки

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 | [] | | popoverWidth | Ширина окна popover (для popover) | [String, Number]| 150 | События | Имя события | Описание | Тип | | ----------- | ---------------- | --------- | :------ | | onClick | Событие клика по кнопке | () => void | Примеры

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 | направление (для drawer действует) | IDirectionType | rtl | Обратные события

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

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" />

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 | Ширина попапа (действует для PopoverAvatar) | Number | String | 200 | | ------------ | ------------------------------------------- | ---------------- | ---- | Слоты | Имя слота | Описание | | ---------- | -------- | | default | Пользовательский контент попапа | Пример

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> | [] | Пример

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

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

1. 6 Навигация

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 | Динамический список вкладок | Array<IRoutes> | [] | | commandOptions | Список пунктов выпадающего меню | Array | [] | События | Событие | Описание | Тип | | ------- | -------- | ---- | | tabClick | Событие клика по вкладке | (pane: TabsPaneContext, ev: Event) => void || tabRemove | Событие удаления вкладки | (path: string) => void | | handleCommand | Событие выбора пункта выпадающего меню | (command: IResultCommand) => void | Пример

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

1.7. Бэкграунд

import {Wallpaper} from '@/components/Wallpaper'; Свойства логотипа | Свойство | Описание | Тип | Значение по умолчанию | | :-------- | -------- | ---- | :--------------------- | | src | Путь к бэкграунду | String | |

1.8. Третьи стороны входа

import ThirdParty from '@/components/ThirdParty/index.vue'; Свойства | Свойство | Описание | Тип | Значение по умолчанию | | :-------- | -------- | ---- | :--------------------- | Пример

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

1.9. Форма

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 | Пользовательский класс формы | String | | | formSize | Размер формы | ISizeType | default | Свойства IFormItems | Свойство | Описание | Тип | Значение по умолчанию | | :------------ | -------------------------------------------- | -------- | :--------------------- | | mode | Тип элемента | 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 | | Callback | Имя события | Описание | Тип | | --------------| -------------------------------------- | --------------------------------------------------------------------| | onSearch | Callback для кнопки поиска | (data: any, close: () => void) => void | Ref события | Имя события | Описание | | --------------| -------------------------------------- | | resetForm | Сбросить форму | | validateForm | Валидировать форму | Пример

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