kui-next v1.4.0

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

<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

其他参数看element官网

tableColumn参数说明

event

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

event

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

其他参数看element官网

tableColumn参数说明

event

KDialog

<template>
  <K-dialog title="提示" v-model="visible" />
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(true);
</script>

props

event

slots

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

event

slots

KPicker

props

其他参数看element官网

tableColumn参数说明