lp-custom-components v0.1.11

工具类组件库（自己工作中用到的一些工具方法和封装的组件）

相关技术栈

• Vue3
• Vite
• Element Plus
• scss
• typescript

组件列表

• LpButton loading按钮
• LpTable 表格
• LpRemoteSelect 远程搜索下拉框
• LpTablePage 分页器
• LpSearchForm 搜索表单

安装

npm install lp-custom-components

快速使用

组件说明

components

// 全局引入
import LpCustomComponents from 'lp-custom-components'
// 按需引入
import { LpButton, LpTable, LpSvgIcon } from 'lp-custom-components'
// 引入样式
import 'lp-custom-components/lib/style.css'

Vue.use(LpCustomComponents)
Vue.use(LpButton)
Vue.use(LpTable)
Vue.use(LpSvgIcon) 
// 创建src/assets/svgs目录下添加svg文件
// npm install vite-plugin-svg-icons -D
// npm install fast-glob -D

// vite.config配置
、、、js
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的svg图标文件夹
      iconDirs: [path.resolve(__dirname, 'src/assets/svgs')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
});
、、、

// webpack配置
npm install svg-sprite-loader fast-glob --save-dev
// webpack.config.js
```js
const path = require('path');
const glob = require('fast-glob');
module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 其他规则...
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[dir]-[name]',
            },
          },
        ],
        include: [path.resolve(__dirname, 'src/assets/svgs')],
      },
    ],
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  // 其他配置...
};

### utils
```bash
import { utils } from 'lp-custom-components'