Skip to content

Latest commit

 

History

History
85 lines (70 loc) · 2.23 KB

README.md

File metadata and controls

85 lines (70 loc) · 2.23 KB
Raw

nly-accordion

支持初始化撑开多个折叠版,点击任意一个之后会将其他撑开的都关闭。 初始撑开为props 参数visible=true 后续会更新支持多个不同手风琴，支持开启手风琴模式

  • ####先看效果：

效果图

  • 支持初始化撑开多个折叠版,点击任意一个之后会将其他撑开的都关闭。
  • 初始撑开为props 参数visible=true
  • 后续会更新支持多个不同手风琴，支持开启手风琴模式

结构

    • ######边侧导航栏结构
<!-- 由于本身是封装的一个边侧导航栏,所有组件中有
NLY-accordionNav
NLY-accordionNavItem
NLY-accordionNavTree
 -->
<NLY-accordionNav>
  <NLY-accordionNavItem icon="nlyblog nly-blog-home">
    Nejinn
  </NLY-accordionNavItem>
  <NLY-accordionNavTree icon="nlyblog nly-blog-book" v-nly-accordion.sss>
    Nejinn
  </NLY-accordionNavTree>
  <NLY-accordionNavCollapse id="sss" visible>
    <NLY-accordionNavItem icon="nlyblog nly-blog-home">
      lerity
    </NLY-accordionNavItem>
    <NLY-accordionNavItem icon="nlyblog nly-blog-home">
      blog
    </NLY-accordionNavItem>
  </NLY-accordionNavCollapse>
</NLY-accordionNav>
    • 只有手风琴折叠版的结构
<任意元素 v-nly-accordion.collapseId>
</任意元素元素>
<NLY-accordionNavCollapse id='collapseId'>
    ...嵌套元素,随意插入
</NLY-accordionNavCollapse>

demo:
<div v-nly-accordion.collapse1>点击我收起或展开 collapse1</div>
<NLY-accordionNavCollapse id='collapse1'>
  <a>我是折叠版中的元素</a>
</NLY-accordionNavCollapse>

<div v-nly-accordion.collapse2>点击我收起或展开collapse2</div>
<NLY-accordionNavCollapse id='collapse2'>
  <a>我是折叠版中的元素</a>
</NLY-accordionNavCollapse>
使用这种结构的时候,请注意自己写css。可以在accordion.vue中修改就行。

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.