rimraf: 执行这个命令,可以将指定的目录删除
vite-plugin-dts: 这是一款用于在 库模式 中从 .ts(x) 或 .vue 源文件生成类型文件(*.d.ts)的 Vite 插件
官网地址: https://github.com/qmhc/vite-plugin-dts/blob/main/README.zh-CN.md
# 安装依赖
npm install
# 开发环境运行
npm run dev
# 构建发布包
npm run build
package.json
依赖包,包说明
tsconfig.json.ts
相关的配件
src/main.ts
开发环境的主入口, npm run dev
后,会从这个入口执行
src/index.ts
构建发布包的主入口,如在 vite.config.ts
文件中配置的 build/lib/entry
属性
.npmignore
这个文件可以指定 npm publish
发布到npm官网上忽略的文件或目录
1, 先注册npm 账号: https://www.npmjs.com/
2, 本地配置npm 仓库地址: 使用
npm config get registry
可以查看当前配置,使用npm config set registry=https://registry.npmjs.org/
设置3, 执行 npm 登陆. 在命令行执行
npm login
,根据提示完成登陆4, 本地打包
npm run build
,执行完成后,会在当前项目目录生成dist
目录. 这个dist
目录是在vite.config.ts
文件中的build/outDir
配置5, 发布到 npm 仓库.
npm publish
组件使用前,需要引入 and vue相关的组件有: [Tag, DatePicker, Divider, Button, Tooltip,Row, Col, Form, Space, Table, Input, Select, Tabs]
在 main.ts 文件中如下引用
import {createApp} from 'vue'
import {ComponentList} from 'hk-core-antdv'
const app = createApp(App);
app.use(ComponentList)
// ComponentList 包含如下组件:
- <DateCheckableTag/>
- <TableList/>
- <DynamicFormGenerator/>
- <DynamicForm/>
<!--
属性:
tags: 要显示的日期选项,默认为所有 ['ALL','TD','YD','TW','LW','TM','LM','CUSTOM']
exclude-tag: 要排除的日期选项,默认有 ['ALL','TD','YD','TW','LW','TM','LM','CUSTOM']
defaultSelect: 默认选择的日期, 默认值为 ALL
事件:
tag-change: 当日期选中后的回调事件, 选中 CUSTOM 不会回调,因为会弹出日期范围选择框
custom-date-change: 选中 CUSTOM 后,且选中日期或清除日期后的回调事件
-->
<DateCheckableTag :exclude-tag="['TD']" @tag-change="data.onTagChange"
@custom-date-change="data.onCustomDateChange"/>
<!--
属性:
query-page-call: 列表数据查询回调,是一个函数
table-attrs: 表格属性:
如 columns、row-selection,
对于官网定义的事件,需要使用 onXXX 来定义,如onExpand. 属性参考: https://www.antdv.com/components/table-cn
rowKey: 默认使用每条记录的id属性,如果没有指定id,则使用通用值 key, 当然,你也可以自己指定 rowKey属性
params: 查询参数,支持Input/Select/DatePicker 组件
[{label: "用户名",field: "username",component: "Input or Select or DatePicker",attrs: '对应组件的属性,参考antd vue官网对应的组件'}]
composite-param: 日期查询条件的属性,可选,如果不设置,不会有日期范围查询条件
label: 显示名称
field: 对应的字段名
defaultSelect: 默认要选中的选项
excludeTag: 要排除的选项
tags: 要显示的日期选项,默认为所有 ['ALL','TD','YD','TW','LW','TM','LM','CUSTOM']
{label:'创建时间',field:'createDate',defaultSelect: 'TD',excludeTag: [''],tags: ['']}
search-col-span: col对应的属性,默认为6
showAddButton: 是否显示添加Button , 默认为 true
showUploadButton: 是否显示上传Button , 默认为 false
showDownloadButton: 是否显示下载Button , 默认为 false
事件:
add-button-click: 添加Button 点击事件
upload-button-click: 上传Button 点击事件
download-button-click: 下载Button 点击事件
loading-data-finish: 数组加载完成后的回调
loading-data-error: 数组加载出错后的回调
暴露的方法(expose):
- refreshData()
父组件在 引用此组件时,加个 ref属性,就可以通过 ref属性的值.value.refreshData() 来调用. 如:
<TableList ref="tableList" ...其它属性.../>
如上声明后,就可以通过 tableList.value.refreshData() 来调用 refreshData() 方法
- startLoading(): table显示加载中spinning
tableList.value.startLoading()
- stopLoading(): table停止加载中spinning
tableList.value.stopLoading()
插槽:
searchBefore: 在查询条件之前自定义内容
buttons: 在搜索/添加/上传/下载button 之后自定义内容,和这些默认的button在同一 row/col
others: 在查询条件之后 另起一行,自定义内容
bodyCell: antd table 内容插槽,参考antd 官网 table组件 bodyCell
-->
<TableList :params="data.params"
show-download-button
show-upload-button
@upload-button-click="() => proxy.$message.info('你点击了上传按钮')"
@download-button-click="() => proxy.$message.info('你点击了下载按钮')"
@add-button-click="() => proxy.$message.info('你点击了添加按钮')"
:composite-param="{label:'创建时间',field:'createDate',defaultSelect: 'TD'}"
:query-page-call="data.queryAll"
:table-attrs="data.tableAttrs">
<template #buttons>
<a-button type="primary" @click="() => proxy.$message.info('你点击了自定义插槽刷新')">
<undo-outlined/>
插槽-刷新
</a-button>
</template>
<template #bodyCell="{text, record, index, column}">
<template v-if="column.dataIndex != 'action'">{{ text }}</template>
<template v-else>
<a-space>
<a-tooltip placement="topLeft" title="编辑" :style="{cursor:'pointer'}"
@click="() => proxy.$message.info(`你点击了编辑:Id: ${record.id},名称: ${record.name}`)">
<edit-outlined :style="{color: '#1677ff'}"/>
</a-tooltip>
<a-tooltip placement="topLeft" title="删除" :style="{cursor:'pointer'}"
@click="() => proxy.$message.info(`你点击了删除:Id: ${record.id},名称: ${record.name}`)">
<delete-outlined :style="{color: '#1677ff'}"/>
</a-tooltip>
</a-space>
</template>
</template>
</TableList>
// 注意: 请在入口文件main.ts注入全局 $message,
import App from "./App.vue";
import {message} from 'ant-design-vue'
const app = createApp(App);
app.config.globalProperties.$message = message
// 需要安装推拽组件和markdown组件
`npm install vue-draggable-plus @toast-ui/editor -S`
<!--
动态表单编辑:
属性: showSave: 是否显示 保存按钮,默认为true
属性: showReset: 是否显示 清空按钮,默认为true
属性: form: 表单编辑器渲染的对象,默认值为
{
labelColSpan: 4,
wrapperColSpan: 20,
align: "right",
layout: 'horizontal',
formItems: [] as Array<any>
}
事件:
save:点击保存时的事件,接收一个参数,定义表单的属性
插槽:
extraActions: 自定义顶部的button
formExtraAttrs: 自定义表单属性插槽,在表单名称字段之后
-->
<DynamicFormGenerator @save="onSaveHandler" show-save show-reset :form="formModel">
<!-- extraActions插槽: 自定义顶部的button -->
<template #extraActions>
</template>
</DynamicFormGenerator>>
<!--
动态表单编辑
属性: showSave: 是否显示 保存按钮,默认为true
属性: showReset: 是否显示 清空按钮,默认为true
事件:
formData:生成表单的属性,也就是上面 <DynamicFormGenerator /> save事件的第一个参数值
-->
<DynamicForm ref="dynamicRef" :form="formData"/>
<!--
验证并获取表单数据:
const dynamicRef = ref<any>()
dynamicRef.value.validateFormFields().then(value => {
}).catch(error => {
console.log(error)
})
-->
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。