lkh-vue-ui

lkh-vue-ui

作者 liukaihong 的 Vue 3 组件库。包里有两套组件：

• Vle UI：前缀 L，作者标识是 l，例如 LTable、LForm。文档在 Vle UI 文档站。
• Lkh：早期组件，前缀 Lkh，例如 LkhTable、LkhForm。

新项目用 Vle UI 这套。依赖 Vue 3 和 ant-design-vue 3。

安装 Vle UI

npm install lkh-vue-ui ant-design-vue vue

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import { VleUI } from 'lkh-vue-ui';
import 'ant-design-vue/dist/antd.css';
import 'lkh-vue-ui/style.css';

const app = createApp(App);
app.use(Antd).use(VleUI).mount('#app');

按需引入：

import { LForm, LTable, useLForm, useLTable } from 'lkh-vue-ui';

下面仍是早期 Lkh 组件的用法。

依赖 Vue 3 和 ant-design-vue 3。

安装

npm install lkh-vue-ui ant-design-vue vue

yarn add lkh-vue-ui ant-design-vue vue

还没发布到 npm 时，可以先装本地目录：

npm install D:/project/giteeProject/lkh-vue-ui

注册

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import LkhUI from 'lkh-vue-ui';
import 'ant-design-vue/dist/antd.css';
import 'lkh-vue-ui/style.css';

const app = createApp(App);
app.use(Antd).use(LkhUI).mount('#app');

也可以按需引入：

import { LkhForm, LkhTable, useLkhForm, useLkhTable } from 'lkh-vue-ui';

表单

<LkhForm @register="register" @submit="onSearch" />

import { useLkhForm } from 'lkh-vue-ui';

const [register] = useLkhForm({
  labelWidth: 80,
  showActionButtonGroup: true,
  submitText: '查询',
  schemas: [
    { field: 'name', label: '姓名', component: 'Input', span: 8 },
    {
      field: 'status',
      label: '状态',
      component: 'Select',
      span: 8,
      componentProps: {
        options: [
          { label: '启用', value: 1 },
          { label: '停用', value: 0 },
        ],
      },
    },
    {
      field: 'deptId',
      label: '部门',
      component: 'ApiSelect',
      span: 8,
      componentProps: {
        api: () => fetch('/api/dept').then((res) => res.json()),
        labelField: 'name',
        valueField: 'id',
      },
    },
  ],
});

component 可用：Input、InputPassword、InputTextArea、InputNumber、Select、ApiSelect、DatePicker、RangePicker、Switch、RadioGroup、Checkbox、CheckboxGroup。

useLkhForm 返回的方法：validate、getFieldsValue、setFieldsValue、resetFields、submit。

表格

<LkhTable @register="registerTable" bordered>
  <template #action="{ record }">
    <a @click="edit(record)">编辑</a>
  </template>
</LkhTable>

const [registerTable, table] = useLkhTable({
  showIndexColumn: true,
  columns: [
    { title: '姓名', dataIndex: 'name' },
    { title: '操作', key: 'action', width: 120 },
  ],
  api: async ({ page, pageSize, name }) => {
    const res = await fetch(`/api/users?page=${page}&pageSize=${pageSize}&name=${name || ''}`);
    const data = await res.json();
    return { items: data.items, total: data.total };
  },
});

table.reload({ name: '张三' }, true);

接口返回 { items, total }、{ list, total } 或数组都可以。

下拉菜单

<LkhDropdown
  :menus="[
    { event: 'edit', text: '编辑' },
    { event: 'delete', text: '删除' },
  ]"
  @menuClick="onMenu"
>
  <a>操作</a>
</LkhDropdown>

本地预览

npm install
npm run dev

浏览器打开 http://localhost:5180 。

发布到 npm

包名是 lkh-vue-ui。lkh-ui 以前被占用过，npm 不允许再注册。

当前机器还没有登录 npm。用作者账号登录后再发布：

npm login
npm publish

发布前会自动执行构建。登录的 npm 用户名需要有发布这个包的权限。