| GeegaIcon |
Icon图标-icon须以g-开头 |
<Icon icon="${1:g-xxx}"> |
| GeegaButtion |
Buttion图标 |
<a-button class="${1:className}" color="${2|error,warning,success|}" @click="${3:()=>{})}"> ${4} </a-button> |
| GeegaPageWrapper |
GeegaUI包裹页面组件 |
<template #left>left <template #right>right</template></PageWrapper> |
| GeegaBasicTable |
GeegaUI表格组件 |
<BasicTable @register="registerTable"><template #toolbar> <a-button type="link" preIcon="g-icon_light_add" @click="${1:()=>{}}" >${2:新增} {{ ${3:编辑} }} <template #action="{ record }"> <TableAction :actions="createActions(record)" /></template></template></BasicTable> |
| GeegaBasicDrawer |
GeegaUI抽屉组件 |
<BasicDrawer :title="actionType" @register="registerFormDrawer" @close="resetFormFields"> ${1}</BasicDrawer> |
| GeegaBasicForm |
GeegaUI表单组件 |
<BasicForm layout="vertical" @register="registerForm" @submit="onSubmitForCreate" /> |
| GeegaBasicTitle |
GeegaUI显示标题 |
<BasicTitle helpMessage="${1:提醒}">标题</BasicTitle> |
| GeegaBasicArrow |
GeegaUI动画的箭头 |
<BasicArrow :expand="false" /> |
| GeegaBasicHelp |
GeegaUI帮助按钮 |
<BasicHelp text="['提示1', '提示2']" /> |
| GeegaSvgIcon |
GeegaUI svg 雪碧图 |
<SvgIcon name="test"> </SvgIcon> |
| GeegaIconPicker |
GeegaUI图标选择器 |
<IconPicker> </IconPicker> |
| GeegaPageFooter |
GeegaUI页面底部工具栏 |
<template #left>left</template> <template #right>right</template></PageFooter> |
| GeegaPopConfirmButton |
GeegaUI带有 PopConfirm 功能的按钮 |
<PopConfirmButton>按钮文本</PopConfirmButton> |
| GeegaAuthority |
GeegaUI 用于项目权限的组件，一般用于按钮级等细粒度权限管理 |
<Authority :value="RoleEnum.ADMIN"> 只有admin角色可见 </a-button></Authority> |
| GeegaBasicModal |
GeegaUI 对 antv 的 modal 组件进行封装，扩展拖拽，全屏，自适应高度等功能 |
<BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']"> Modal Info.</BasicModal> |
| GeegaDescription |
GeegaUI对antv的 Descriptions 组件进行封装 |
<Description title="基础示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="3" :data="mockData" :schema="schema"/> |
| GeegaBasicUpload |
GeegaUI项目文件上传 |
<BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" /> |
| GeegaBasicTree |
GeegaUI对antv的 tree 组件进行封装 |
<BasicTree :treeData="treeData" /> |
| GeegaLoading |
GeegaUI Loading |
<Loading :loading="loading" :absolute="absolute" tip="xx" /> |
| GeegaImportExcel |
GeegaUI XLSX，具体文档可以参考XLSX 文档https://sheetjs.com/ |
<ImportExcel @success="loadDataSuccess"> <a-button class="m-3">导入Excel</a-button></ImportExcel> |
| GeegaScrollContainer |
GeegaUI 基于element-ui的 el-scrollbar 组件 |
<ScrollContainer class="mt-4"> ${1}</ScrollContainer> |
| GeegaCollapseContainer |
GeegaUI 区域折叠卡片容器 |
<CollapseContainer> content </CollapseContainer> |
| GeegaLazyContainer |
GeegaUI 延时加载/懒加载组件 |
<LazyContainer @init="() => {}"><TargetContent /> <template #skeleton> <Skeleton :rows="10" /> </template></LazyContainer> |
| GeegaFadeTransition |
GeegaUI 渐变动画组件 |
<FadeTransition> <div>渐变动画组件</FadeTransition> |
| GeegaScaleTransition |
GeegaUI 缩放动画组件 |
<ScaleTransition> <div>缩放动画组件</div> |
| GeegaSlideYTransition |
GeegaUI Y轴动画组件 |
<SlideYTransition> <div>Y轴动画组件</SlideYTransition> |
| GeegaSlideYReverseTransition |
GeegaUI Y轴反向动画组件 |
<SlideYReverseTransition> <div>Y轴反向动画组件</SlideYReverseTransition> |
| GeegaScrollYTransition |
GeegaUI Y轴滑动组件 |
<ScrollYTransition> Y轴滑动组件</div></ScrollYTransition> |
| GeegaScrollYReverseTransition |
GeegaUI Y轴动滑动反方向滑动组件 |
<ScrollYReverseTransition> <div>Y轴动滑动反方向滑动组件</div></ScrollYReverseTransition> |
| GeegaSlideXTransition |
GeegaUI X轴动滑动组件 |
<SlideXTransition> <div>X轴动滑动组件</SlideXTransition> |
| GeegaScrollXTransition |
GeegaUI Y轴动滑动滑动组件 |
<ScrollXTransition> <div>Y轴动滑动滑动组件</div></ScrollXTransition> |
| GeegaSlideXReverseTransition |
GeegaUI X轴动反方向滑动组件 |
<SlideXReverseTransition> <div>X轴动反方向滑动组件</div></SlideXReverseTransition> |
| GeegaScrollXReverseTransition |
GeegaUI X轴动滑动反方向滑动组件 |
<GeegaScrollXReverseTransition> X轴动滑动反方向滑动组件</div></GeegaScrollXReverseTransition> |
| GeegaScaleRotateTransition |
GeegaUI 收缩旋转滑动组件 |
<ScaleRotateTransition> 收缩旋转滑动组件</div></ScaleRotateTransition> |
| GeegaExpandXTransition |
GeegaUI X轴展开滑动组件 |
<ExpandXTransition> <div>X轴展开滑动组件</div></ExpandXTransition> |
| GeegaExpandTransition |
GeegaUI Y轴展开滑动组件 |
<ExpandTransition> <div>Y轴展开滑动组件</div></ExpandTransition> |
| GeegaClickOutSide |
GeegaUI 用于监听包裹的元素点击外部触发事件 |
<ClickOutSide @clickOutside="() => (showRef.value = false)"> <div class="click-out-side-demo-content" @click="() => (showRef.value = true)"> {{ showRef ? '鼠标点击那部（点击边框外可以恢复）' : '点击该区域状态(初始状态)' }} </div></ClickOutSide> |
| GeegaTinymce |
GeegaUI 富文本组件 |
<Tinymce v-model="value" @change="handleChange" width="100%" /> |
| GeegaStrengthMeter |
GeegaUI 密码强度检测组件 |
<StrengthMeter placeholder="隐藏input" :show-input="false" value="!@#qwe12345" /> |
| GeegaQrCode |
GeegaUI 二维码组件 |
<QrCode value="https://www.geega.com" /> |
| GeegaBasicDragVerify |
GeegaUI 拖拽验证组件 |
<BasicDragVerify @success="handleSuccess" /> |
| GeegaMarkDown |
GeegaUI 基于Vditor (opens new window)的 MarkDown 编辑器 |
<MarkDown v-model:value="value" ref="markDownRef" /> |
| GeegaVirtualScroll |
GeegaUI 虚拟滚动组件(用于大量数据纯展示时使用) |
<VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300"> <template v-slot="{ item }"> <div class="virtual-scroll-demo__item">{{ item.title }}</div> </template></VirtualScroll> |
| GeegaCountTo |
GeegaUI 虚拟滚动组件(用于大量数据纯展示时使用) |
<CountTo prefix="$" :startVal="1" :endVal="200000" :duration="8000" /> |
| GeegaCreateImgPreview |
GeegaUI 将Preview组件函数化。通过函数方便创建组件 |
createImgPreview({ imageList: [ 'https://xxxx', 'https://xxxx', 'https://xxxx', ] }); |
| GeegacreateContextMenu |
GeegaUI 函数式创建右键菜单组件。 只要能拿到 dom 的 event 对象就能为其创建右键菜单 |
import { useContextMenu } from '/@/hooks/web/useContextMenu';const [createContextMenu] = useContextMenu();createContextMenu({ event: e, items: [ { label: 'New', icon: 'ant-design:plus-outlined', handler: () => { createMessage.success('click new'); }, }, { label: 'Open', icon: 'ant-design:folder-open-filled', handler: () => { createMessage.success('click open'); }, }, ], }); |
| GeegaUseLoading |
GeegaUI 函数话loading |
const [openFullLoading, closeFullLoading] = useLoading({ tip: '加载中...', }); const [openWrapLoading, closeWrapLoading] = useLoading({ target: wrapEl, props: { tip: '加载中...', absolute: true, }, }); |
| GeegaImpGeegaUI |
一键导入GeegaUI 组件 |
import { ${1:Input commponent} } } from '@geega-components/geega-ui' |
