Vue3组件开发——列表展开项(DropDownitem)

Vue3组件开发——列表展开项(DropDownitem)

根据万物皆可组件化的开发思维，我们可以继续将组件化应用到列表展开项里面。

因为在实际开发过程中，我们需要满客户随时修改列表项的需求，如果一股脑写死，维护还有开发可能都不会方便。

1. 环境

主要用到的环境是VScode+TS+VUE3+Bootstrap

2. 代码

2.1 组件：

DropDownItem.vue

<template>
    <li
    class="dropdown_option"
    :class="{'is-disabled': disabled}">
    <slot>
    </slot>
    </li>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }

})
</script>
<style scoped>
.dropdown_option.is_disabled *{
    color: #6c6c6c;
    pointer-events: none;
    background-color: transparent;
}

</style>

根据组件化思想，