一个简易版的组件库二次封装

参考链接：本文基于此进行修改

vue3 对ant-design-vue 按钮组件进行二次封装_a-button二次封装-CSDN博客

组件库依赖：ant-design-vue

用ant-design-vue开发可以参考：Ant design + Vue_vue antdv4, 按需引入-CSDN博客

主要修改以下两个文件

1.index.vue

<template>
    <!-- 新增 -->
    <template v-if="type==='add'">
      <a-tooltip :title="text" color="#87d068">
        <a-button @click="handleClick">
          <template #icon>
            <PlusOutlined/>
          </template>
        </a-button>
      </a-tooltip>
    </template>
    <!-- 编辑 -->
    <template v-if="type==='edit'">
      <a-tooltip :title="text" color="#87d068">
        <a-button :disabled="isAble" @click="handleClick">
          <template #icon>
            <EditTwoTone />
          </template>
        </a-button>
      </a-tooltip>
    </template>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { PlusOutlined, EditTwoTone } from '@ant-design/icons-vue'

const props = defineProps({
  text: {
    type: String,
    default: '编辑'
  },
  type: {
    type: String,
    default: 'edit'
  },
  isAble: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['click'])

const handleClick = () => {
  emits('click')
}
</script>

<style lang="scss" scoped>
/* 样式可以根据需要添加 */
</style>

2.App.vue

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
import LButton from 'D:/projects/lanyn_ui/packages/button/src/index.vue'

</script>

<template>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
  <LButton type="edit" text="test1"></LButton>
  <LButton type="add" text="test2"></LButton>
</template>

<style scoped>

</style>

3.效果展示