VUE3组件开发——下拉菜单(DropDown)

最新推荐文章于 2024-08-21 09:01:24 发布

a Fang

最新推荐文章于 2024-08-21 09:01:24 发布

阅读量4.9k

点赞数 2

分类专栏： VUE 文章标签： vue.js typescript javascript bootstrap 组件

本文链接：https://blog.csdn.net/qq_46258465/article/details/122491921

版权

本文介绍了如何在Vue3环境中利用TypeScript和Bootstrap开发下拉菜单组件。通过VScode设置，详细讲解了DropDown.vue组件的实现，包括显示逻辑和样式调整。同时阐述了在GlobalHeader组件中引用并使用该下拉菜单的方法。

摘要由CSDN通过智能技术生成

VUE3组件开发——下拉菜单(DropDown)

这个组件主要是实现下拉多级列表的形式

1. 环境

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

2. 代码

这里主要就是判断是不是点击打开了下拉菜单的部分，让它显示多级列表

2.1 组件

DropDown.vue

<template>
<!-- 写了样式也不骑作用 -->
<div class="dropdown" style="{display: inline-table}">
    <a href="#" class="btn btn-outline-light my-2 dropdown-toggle"  :style="{color :'black', fontSize: '18px'}">{
  {title}}</a>
    <!-- <ul class="dropdown_menu" :style="{display: 'block'}" v-if="isOpen"> -->
    <ul class="dropdown_menu" :style="{display: 'block'}">
    <li class="dropdown-item">
        <a href="#"  :style="{color :'bla