/my-components-vue3_elplus

基于 vue3 + ts 二次封装 Element-plus 组件

Primary LanguageJavaScript

Vue 3 + TypeScript + Vite

演示站点

介绍

该项目是基于 vite2 + vue3 + typescript + element-plus 二次封装的组件库，提供了一下组件：

  • 省市区选择器
  • 时间选择器
  • 日期选择器
  • 城市选择器
  • 趋势标记
  • 通知列表
  • 通知菜单
  • 导航菜单
  • 动态进度条
  • 可配置型表单
  • 可配置型表格
  • 弹出框表单
  • 日历

快速上手

因为当前组件库是基于element-plus二次封装的，所以使用该组件库时必须确保在项目当中已安装和正确使用了element-plus，element-plus安装指南

使用指南

  1. 在项目目录里安装isakya-element-components
  • npm安装: npm i -S isakya-element-components
  • cnpm安装: cnpm i -S isakya-element-components
  • pnpm安装: pnpm i -S isakya-element-components
  • yarn安装: yarn add -S isakya-element-components
  1. 全局引入
    在main.ts文件中写入以下代码：
// 全局引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import isakyaUI from 'isakya-element-components'
import 'isakya-element-components/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(isakyaUI)
  1. 按需引入
// 按需引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import chooseIcon from 'isakya-element-components/chooseIcon'
import 'isakya-element-components/chooseIcon/style.css'
import chooseArea from 'isakya-element-components/chooseIcon'
// ...

const app = createApp(App)

app.use(ElementPlus)
app.use(chooseIcon)
app.use(chooseArea)
// ...
  1. 使用
    具体用法参照以下文档了解具体使用方式
    文档更新中...