element-pro-vue

基于element-plus的增强组件库

源码地址

https://gitee.com/zheyiw/element-pro-vue

组件下载

yarn add element-pro-vue

全局使用方法

在vue3项目中全局引用的方式

//main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
//先引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//再引入element-pro
import ElementPro from 'element-pro-vue';
import 'element-pro-vue/lib/style.css';

const app = createApp(App);
app.use(ElementPlus, { size: 'default', locale: zhCn }) //1，先引入element-plus
app.use(ElementPro); //2，再引入element-pro
app.mount('#app');

上传到npm的教程

npm config set registry https://registry.npmjs.org/
npm login
npm publish

组件说明

MkCustomTable - 动态表格

• 可以配置列的名称，排序，是否显示
• 配置缓存在本地

MkPagination - 分页

• 分页组件，自动保存上次选择的页大小，并缓存在本地
• 全局使用时实现所有页面同意分页大小的功能

MkScanInput - 扫码输入

• 扫码输入框，自动屏蔽输入法（切换到英文输入）
• 避免中文输入法导致的扫码失败问题