kui-next
最新的已迁移@kvuse/components,详情
vue3组件库
基于element-ui二次开发，根据项目需求，方便项目开发使用
安装
# Npm
npm install kui-next
# Yarn
yarn add kui-next
使用 按需引入
import {
KButton,
KInput,
KTable,
KPage,
KBatchTable,
KDialog,
KBreadcrumb,
KTabs,
KPicker,
} from 'kui-next';
export default {
components: {
KButton,
KInput,
KTable,
KPage,
KBatchTable,
KDialog,
KBreadcrumb,
KTabs,
KPicker,
},
};
全局components
import { createApp } from 'vue';
import { KUI } from 'kui-next';
import 'kui-next/lib/style.css';
Vue.use(KUI)
使用
KButton
点击之后延时800ms,防止重复点击
<k-button type="primary">
测试按钮
</k-button>
KInput
默认只能输入数字，默认小数点后两位
props
| 属性 |
类型 |
默认 |
使用说明 |
| type |
String |
number |
integer 只能输入整数 |
| point |
Number |
2 |
小数点后几位 |
<template>
<k-input v-model="value" placeholder="输入内容" />
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
</script>
KTable
<template>
<k-table :table-column="tableColumn" :table-data="tableData">
<template #set="{ row }">
<k-button type="primary" plain @click="clickHandle(row)">
详情
</k-button>
</template>
</k-table>
</template>
<script setup>
import { ref } from 'vue';
// 如果不是动态可以不使用ref
const tableColumn = ref([
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '操作', custom: 'set', width: 150 },
]);
const tableData = ref([
{ date: '2022-05-20', name: '张三' },
{ date: '2022-05-21', name: '李四' },
]);
const clickHandle = (row) => {
console.log('row: ', row);
};
</script>
<style>
</style>
props
| 属性 |
类型 |
使用说明 |
| tableColumn |
Array |
[{ lable:'日期', prop: 'date'}] |
| tableData |
Array |
:tableData 或者 v-model:tableData="data" |
| currentPage |
Number |
v-model="current" |
| total |
Number |
数据的总条数 |
| size |
Number |
每页显示的条数 |
其他参数看element官网
tableColumn参数说明
| Props |
说明 |
类型 |
| custom |
自定义内容插槽 |
string |
| header |
自定义表头插槽 |
string |
| width |
对应列的宽度 |
string |
| minWidth |
对应列的最小宽度 |
string |
| sortable |
对应列是否可以排序 |
boolean |
| fixed |
列是否固定在左侧left或者右侧right， true 表示固定在左侧 |
string / boolean |
event
| 事件 |
说明 |
回调参数 |
| current-change |
当用户切换分页的触发该事件 |
currengPage |
| sort-change |
点击排序触发 |
{ prop, order, currentPage, column } |
kPage
<template>
<k-page v-model="currentPage" :total="100" @current-change="currentChange" />
</template>
<script setup>
import { ref } from 'vue';
const currentPage = ref(1);
const currentChange = (value) => {
console.log('当前页数: ', value);
};
</script>
<style>
</style>
props
| 属性 |
类型 |
使用说明 |
| currentPage |
Number |
v-model="current" |
| total |
Number |
数据的总条数 |
| size |
Number |
v-model:page="current" 每页显示的条数 |
| showSize |
Boolean |
是否显示切换每页的条数 |
event
| 事件 |
说明 |
回调参数 |
| current-change |
当用户切换分页的触发该事件 |
currengPage |
| size-change |
切换条数触发改事件 |
size |
KBatchTable
<template>
<k-batch-table :table-column="tableColumn" :table-data="tableData" key-id="id" v-model="multipleSelection">
<template #set="{ row }">
<k-button type="primary" plain @click="clickHandle(row)">
详情
</k-button>
</template>
</k-batch-table>
</template>
<script setup>
import { ref } from 'vue';
// 如果不是动态可以不使用ref
const tableColumn = ref([
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '操作', custom: 'set', width: 150 },
]);
const tableData = ref([
{ date: '2022-05-20', name: '张三', id: 1 },
{ date: '2022-05-21', name: '李四', id: 2 },
]);
const multipleSelection = ref([]);
const clickHandle = (row) => {
console.log('row: ', row);
};
</script>
<style>
</style>
batchTable组件
props
| 属性 |
类型 |
使用说明 |
| tableColumn |
Array |
[{ lable:'日期', prop: 'date'}] |
| tableData |
Array |
:tableData 或者 v-model:tableData="data" |
| page |
Number |
v-model:page="current" |
| size |
Number |
每页显示的条数 |
| keyId |
String |
设置选择的唯一值，默认id |
| model-value / v-model |
Array |
选择的数组 |
| selectList |
Array |
已选择的列表 |
其他参数看element官网
tableColumn参数说明
| Props |
说明 |
类型 |
| custom |
自定义内容插槽 |
string |
| header |
自定义表头插槽 |
string |
| width |
对应列的宽度 |
string |
| minWidth |
对应列的最小宽度 |
string |
| sortable |
对应列是否可以排序 |
boolean |
| fixed |
列是否固定在左侧left或者右侧right， true 表示固定在左侧 |
string / boolean |
event
| 事件 |
说明 |
回调参数 |
| current-change |
当用户切换分页的触发该事件 |
currengPage |
| sort-change |
点击排序触发 |
{ prop, order, currentPage, column } |
KDialog
<template>
<K-dialog title="提示" v-model="visible" />
</template>
<script setup>
import { ref } from 'vue';
const visible = ref(true);
</script>
props
| 属性 |
类型 |
使用说明 |
| showFooter |
Boolean |
是否显示footer,默认false |
event
| 事件 |
说明 |
回调参数 |
| confirm |
当用户点击确认触发该事件 |
|
| open |
打开对话框的时候触发 |
|
| close |
关闭对话框的时候触发 |
|
slots
| 插槽名 |
说明 |
插槽作用域 |
| footer |
footer内容 |
|
KTabs
首先要配置路由，name值要和路由名一致，切换路由自动跳转，刷新默认当前路由
如果没有配置路由，请使用elmentPlus tabs
<template>
<k-tabs :tabs-list="tabsList" @tab-click="tabClick" />
</template>
<script setup>
import { ref } from 'vue';
const tabsList = ref([
{ label: '全部', name: 'all' },
{ label: '正常', name: 'normal' },
{ label: '已拉黑', name: 'block' },
]);
const tabClick = (name) => {
console.log('name: ', name);
};
</script>
props
| 属性 |
类型 |
使用说明 |
| tabsList |
Array |
|
| type |
String |
类型 |
event
| 事件 |
说明 |
回调参数 |
| tab-click |
当用户点击确认触发该事件 |
|
| change |
路由改变的触发 |
|
slots
KPicker
props
| 属性 |
类型 |
使用说明 |
| modelValue |
Array |
勾选的列表 |
| tableColumn |
Array |
[{ lable:'日期', prop: 'date'}] |
| tableData |
Array |
:tableData 或者 v-model:tableData="data" |
| currentPage |
Number |
v-model="current" |
| selectList |
Array |
已选择的列表 |
| keyId |
String |
设置选择的唯一值，默认id |
| keyName |
String |
设置选择的名字参数，默认pName |
其他参数看element官网
tableColumn参数说明
| Props |
说明 |
类型 |
| custom |
自定义插槽 |
string |
| width |
对应列的宽度 |
string |
| minWidth |
对应列的最小宽度 |
string |
| sortable |
对应列是否可以排序 |
boolean |