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';
import SvgIcon from '@/components/SvgIcon/index.vue'
属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
icon | 图标组件/字符串(支持element/阿里/字节); | [String, Object] | |
size | 图标大小 | String | 1rem |
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';
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';
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" />
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';
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';
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';
import {Wallpaper} from '@/components/Wallpaper';
Logo属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
src | 壁纸路径 | String |
import ThirdParty from '@/components/ThirdParty/index.vue';
属性
属性名 | 说明 | 类型 | 默认值 |
---|
案例
import ThirdLogin from './modules/Third.vue';
![logo](./doc/images/ Third.png)
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 |
ref事件
事件名 | 说明 |
---|---|
resetForm | 刷新表单 |
validateForm | 校验表单 |
案例
import { FormButton } from '@/layout/Widgets';
import { InlineButtonSearch } from '@/components/Form';
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。