Vue El Laboratory

一个Vue 3组件库和工具方法集合，包含表格组件、对话框hooks、插件和实用工具。

安装

npm install vue-el-laboratory

使用

按需引入

import { ConfigTable, useDialog } from 'vue-el-laboratory'

部分组件

ConfigTable

可配置的表格组件，支持列配置、排序等功能。

<template>
  <ConfigTable
    height="100%" :data="table.tableData.value" :loading="table.loading.value"
    :table-columns="tableColumnConfig" @selection-change="table.handleSelectionChange"
  />
</template>

<script setup>
import { ConfigTable, useCRUDVariable, setColsConfig } from 'vue-el-laboratory'

const table = useCRUDVariable({
  get getParams() {
    return {
      tenderId: props.data.id,
    }
  },
  getApiFn: api.getList,
})

const tableColumnConfig = computed(() => {
  return setColsConfig([
    { type: 'selection', fixed: 'left' },
    { type: 'index', label: '序号', width: 80 },
    {
      label: '操作',
      width: 160,
      fixed: 'right',
      hidden: !props.isNotClearing,
      formatter: (row) => {
        return (
          <el-button
            type="danger"
            onClick={() => deletableFile(row)}
          >
            删除
          </el-button>
        )
      },
    },
  ], { align: 'center', showOverflowTooltip: true })
})
</script>

useDialog

对话框组合式API。

import { useDialog } from 'vue-el-laboratory'

function testDialog(row) {
  const dialog = useDialog()
  dialog.init({
    title: '删除文件',
    default({ confirm }) {
      return (
        <div>
          <div>确定删除该文件吗？</div>
          <div class="flex justify-end">
            <el-button onClick={dialog.cancel}>取消</el-button>
            <el-button type="primary" loading={dialog.loading.value} onClick={confirm}>确认</el-button>
          </div>
        </div>
      )
    },
    async confirm() {
      dialog.loading.value = true
      try {
        await Api.deleteB({ ids: [row.id] })
        ElMessage.success('操作成功')
        table.loadData()
        dialog.cancel()
      }
      catch (error) {
        console.log(error)
      }
      finally {
        dialog.loading.value = false
      }
    },
  })
}

插件

VueDevTools 增强

import VueDevTools from 'vite-plugin-vue-devtools'
import { vueDevtoolsEnhancer } from 'vue-el-laboratory'

/** 配置项文档：https://cn.vitejs.dev/config */
export default (configEnv: ConfigEnv): UserConfigExport => {
  return {
    .....
    /** Vite 插件 */
    plugins: [
      .....
      vueDevtoolsEnhancer(),
      VueDevTools(
        {
          launchEditor: path.basename(process.env.VSCODE_GIT_ASKPASS_NODE || 'code.exe', '.exe').toLowerCase(),
        },
      ),
      .....
    ]
    .....
  }
}

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

# 发布到npm
npm run publish

项目结构

src/
├── table/           # 表格组件
│   ├── ConfigTable.vue
│   ├── useCRUDVariable.ts
│   ├── types.ts
│   └── utils/
├── utils/           # 工具方法
│   ├── tools.ts
│   └── validate.ts
├── plugins/         # 插件
│   ├── element-plus/
│   └── vueDevtoolsEnhancer.ts
└── index.ts         # 主入口

发布到npm

1. 确保已登录npm：npm login
2. 更新版本号：npm version patch|minor|major
3. 运行发布脚本：npm run publish

许可证

MIT