kld-components v1.0.16

介绍

1.所有组件命名以Kld开头

组件分类

1.简单组件：基础组件规划、设计、封装（无业务属性、且只有单一组件）

对于简单组件，为了防止antd组件升级带来的大量修改工作，我们对单一元素的组件进行二次封装，让其具备antd组件的原有能力

2.复杂组件：规划、设计、封装（无业务属性、通过多个基础组件组合而成的）

3.业务组件：规划、设计、封装（可将基础组件、复杂组件再结合后端数据绑定的组件）

组件列表

简单组件

使用

1） 如何引用组件包，引用组件示例：

1. 组件包已发布到npm官网，我们可以执行npm i kld-components 或者pnpm i kld-components，下载组件包依赖
2. 在main.js文件中

import { createApp } from 'vue'
import kldComponent from "kld-components";
createApp(App).use(kldComponent).mount('#app')// 全局注册使用

1. 在需要此组件的页面中直接嵌套使用即可，组件的属性以及事件可参考antd官网：如

<template>
  <div>
    <!-- 直接使用即可 -->
    <组件对象名 /> 
    <Kld-button ref="KButton" type="primary" @click="onButton('测试主按钮!')">测试主按钮</Kld-button>
  </div>
</template>

1. 如果我们在组件需要使用到按钮内置方法就可以通过ref来操作，组件详细的内置方法，可参考antd官网组件详细介绍中查看，功能实现代码如下

<template>
    <div class="body-div">
      <Kld-button ref="KButton" type="primary" @click="onButton('测试主按钮!')">测试主按钮</Kld-button>
    </div>
</template>

<script lang="ts" setup>
import {ref, } from 'vue';
import { message} from 'ant-design-vue';
const KButton = ref();
const onButton = (text: string) => {
    console.log(KButton.value, 999)
    //下方两种方法均可调用组件中内置的方法
    KButton.value.KldButton.focus();
    //KButton.value.focus();
    message.success(text);
}
</script>

<style lang="less" scoped>

</style>