mcg-component-plus

介绍

使用 vue3+ts+vue-router@4+vite+rollup+element-plus 进行element-plus部分组件的二次封装，供自己学习使用，如有需求，可相互学习

安装使用

1、安装

    npm install mcg-component-plus

2、使用

前置安装：

npm install [email protected] @element-plus/[email protected] --save

// main.ts 完整引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 引入图标
import * as Icons from '@element-plus/icons'
import { toLine } from './utils'
for (let i in Icons) {
  // 注册全部图标组件
  app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

toLine函数

// 把驼峰转换成横杠连接
export const toLine = (value: string) => {
  return value.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()
}

全局引入

// main.ts

import mUI from 'mcg-component-plus'
import 'mcg-component-plus/dist/index.css'
app.use(mUI)

在组件中使用

<template>
  <m-choose-date></m-choose-date>
  ...其他组件
</template>

按需引入

// main.ts

import chooseIcon from 'mcg-component-plus/chooseIcon'
import 'mcg-component-plus/chooseIcon/style.css'
app.use(chooseIcon)

在组件中使用

<template>
  <m-choose-icon></m-choose-icon>
</template>

其他

• 在使用过程中有什么问题可以 issue 我