vue3+TS实现简易组件库

vue3+TS搭建一个自己的组件库。

前置

首先下载vue-cli，搭建我们的环境，vue-create-luckyUi，选择vue3和TypeScript 。在src目录下创建package作为组件目录。再安装bootstrap，用bootstrap里面的样式来完成我们的组件。

组件编写

dropdown

首先查看boorstrap文档，是这样用的

<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">Dropdown button</button><div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
</div> 

首先那个button按钮就是我们dropdown按钮的内容，将这部分作为属性传入，而dropdown-menu的内容是作为dropdown-item的，明显这里不能固定写三个，这里就用插槽占位，再封装一个dropdown-item组件。

首先dropdown组件内容如下：

<template><div class="dropdown" ref="dropdownRef"><ahref="#"class="btn btn-outline-light my-2 dropdown-toggle"@click.prevent="toggleOpen">{
  { title }}</a><ul class="dropdown-menu" :style="{ display: 'block' }" v-if="isOpen"><slot></slot></ul></div>
</template> 

dropdown-item的内容就是：

<template><liclass="dropdown-option":class="{'is-disabled': disabled}"><slot></slot></li>
</template>

<script lang="ts"> import { defineComponent } from 'vue'
export default defineComponent({name: "DropdownItem",props: {disabled: {type: Boolean,default: false}}
}) </script>

<style> .dropdown-option.is-disabled * {color: #6c757d;pointer-events