dk-vui组件库(Vue 3 + Vite)
版本升级
- 2023-11-29 v0.0.35
1. 增加 VText 组件
2. 增加 getRoutes 路由组装方法
3. 自定义分页组件(表格组件在分页大小、搜索条件变化后,再次触发搜索将重置页码为1)
4. 增加带参数的页面跳转处理
组件
- VTable 表格组件(基于vxe-table二次封装)
- VPage 页面组件(覆盖所有页面)
- VGroup 组合组件(多元素组合)
- VButton 按钮组件(按钮级权限)
- VAuth 按钮组件(区块级权限)
- VText 文本组件(默认值、颜色、溢出、复制)
指令
- v-dom-load dom加载完毕时触发
- v-dom-resize dom大小改变时触发
方法
#### getRoutes 组装路由方法
``
js
import DKVui from 'dk-vui'
const routerFiles = import.meta.globEager(['../views//index.vue', '!/components/**']) // 排除组件
export const routes = DKVui.getRoutes(routerFiles, 'Pms') // 第二个参数为路由名称前缀,如 Pms
`
#### 安装
`
git
pnpm i -g dk-vui
`
#### 注册
main.js
`
js
...
import DKVui from 'dk-vui'
import 'dk-vui/dist/style.css'
app.use(DKVui)
`
#### 使用
`
html
带标题
end-placeholder="日期结束" style="max-width: 300px" />
start-placeholder="Start date" end-placeholder="End date" style="max-width: 300px" />
至
新增
导出
`
`
js
const tableRef = ref()
const query = () => {
tableRef?.value.query()
}
const tableOptins = reactive({
formConfig: {
data: {
base: '', // 基础类型
date: { value: [], range: true, rangeKeys: ['start_time', 'end_time'] }, // 日期
group: { type: 'group1', value: '' }, // 组合
dateRange: { type: 'dateRange1', value: [], range: true }, // 组合+日期范围
sizeRange: { type: 'sizeRange1' }, // 组合+范围
}
},
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 60 },
{ field: 'name', title: 'Name' },
{ field: 'nickname', title: 'Nickname' },
{ field: 'role', title: 'Role' },
{ field: 'address', title: 'Address', showOverflow: true }
],
proxyConfig: {
ajax: {
query: ({ page, form }) => {
console.log('提交后端的form: ', form)
return api.query(...page, ...form)
}
}
}
})
``