npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@corgicoding/el-libs

v2.1.7

Published

element-plus的二次封装组件集合

Downloads

32

Readme

业务封装组件集合

基于 element-plus 二次封装的开发效率组件,包括

  1. 模态框
    • CustomDialog
  2. 数据表单组件
    • DataFormGrid
  3. 数据分页组件
    • DataPagination
  4. 数据表格组件
    • DataTable
  5. 分页数据表格组件
    • DataTableGrid
  6. 搜索数据表格组件
    • PageSearchTable
  7. 字典组件集合
    • DictSelect
    • DictRadio
    • DictCheckbox
  8. 弹窗表单组件
    • DialogFormGrid
  9. 远程下拉组件
    • 远程下拉
      • RemoteSelect
    • 远程树形下拉
      • RemoteTreeSelect
  10. 上传组件
    • 图片上传
      • UploadImage
    • 文件上传
      • UploadFiles

使用

可以分为全局使用和按需加载,推荐使用按需加载。

按需加载

global 设为 false,即可实现按需加载,组件库将启动配置注册功能,不进行组件安装至全局

import { createPinia } from 'pinia';
import router from './router';
import WELLComponent from '@corgicoding/el-libs';
import httpInstance from '@/services/http/index';
import '@corgicoding/el-libs/lib/style.css';
// 权限指令
import authDirectives from './plugins/directives/auth';

app
  .use(createPinia())
  .use(ElementPlus)
  .use(router)
  .use(authDirectives)
  .use(i18n)
  .use(WELLComponent, {
    global: false,
    axios: httpInstance,
    prefixCode: import.meta.env.VITE_PLATFORM_CODE || '',
    auth: validateActionPermission
  })
  .mount('#app');

在页面中使用

<script setup lang="ts">
import { CustomDialog } from '@corgicoding/el-libs';

const showDialog = ref(false);
const dialogRef = ref<instanceType<typeof CustomDialog>>();
</script>

<template>
  <CustomDialog v-model="showDialog" destroy-on-close title="测试弹窗">
    <div class="pr-5">
      <span>这是测试数据显示</span>
    </div>
  </CustomDialog>
</template>

全局使用

global 设为 true,后续在页面中使用不需要再引入对应组件

import { createPinia } from 'pinia';
import router from './router';
import WELLComponent from '@corgicoding/el-libs';
import httpInstance from '@/services/http/index';
import '@corgicoding/el-libs/lib/style.css';
// 权限指令
import authDirectives from './plugins/directives/auth';

app
  .use(createPinia())
  .use(ElementPlus)
  .use(router)
  .use(authDirectives)
  .use(i18n)
  .use(WELLComponent, {
    global: true,
    axios: httpInstance,
    prefixCode: import.meta.env.VITE_PLATFORM_CODE || '',
    auth: validateActionPermission
  })
  .mount('#app');

在页面中使用,缺点无法提示相关的组件信息

<script setup lang="ts">
const showDialog = ref(false);
</script>

<template>
  <CustomDialog v-model="showDialog" destroy-on-close title="测试弹窗">
    <div class="pr-5">
      <span>这是测试数据显示</span>
    </div>
  </CustomDialog>
</template>

组件库

模态框

名称:CustomDialog

封装系统基本的弹窗设计,自定义样式符合设计稿,提供全局系统的穿透支持。

具体文档:链接

数据表单组件

名称: DataFormGrid

封装表单常见的类型, 通过配置快速生成表单内容, 支持详情文本并且以栅格形式支持响应式布局.

具体文档:链接

数据分页组件

名称: DataPagination

封装 el-pagination, 为 DataTableGrid 服务

具体文档:链接

数据表格组件

名称: DataTable

封装 el-table, 以 数据 + 配置项 形式生成表单数据.

具体文档:链接

分页数据表格组件

名称: DataTableGrid

基于 DataTable 编写, 支持快速生成, 对接列表接口实现分页和配置操作功能.

具体文档:链接

搜索数据表格组件

名称: PageSearchTable

基于 DataTableGridDataFormGrid 编写, 支持快速生成, 对接列表接口实现分页和配置操作功能, 并且自动根据页面高度铺满, 支持搜索表单和列表的快速互动.

具体文档:链接

字典组件集合

封装字典常见的三种组成形式, 为 DataFormGrid 服务, 自带缓存

具体文档:链接

字典下拉

名称: DictSelect

字典单选框

名称: DictRadio

字典多选

名称: DictCheckbox

弹窗表单组件

名称: DialogFormGrid

基于 CustomDialogDataFormGrid 设计的弹窗表单, 快速生成 新增编辑删除 业务表单功能。

具体文档:链接

远程下拉组件

快速配置 字符串 形式或 数组 形式的 下拉树形 接口,为 DataFormGrid 服务。

具体文档:链接

远程下拉

名称: RemoteSelect

远程树形下拉

名称: RemoteTreeSelect

上传组件

快速配置上传图片或文件接口,为 DataFormGrid 服务。

具体文档:链接

图片上传

名称: UploadImage

文件上传

名称: UploadFiles