https://github.com/nejinn/nly-accordion

vue 自定义指令封装一个手风琴嵌套组件
https://github.com/nejinn/nly-accordion

css vue

Last synced: 16 days ago
JSON representation

vue 自定义指令封装一个手风琴嵌套组件

• Host: GitHub
• URL: https://github.com/nejinn/nly-accordion
• Owner: nejinn
• Created: 2020-02-16T16:26:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T07:26:38.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T07:10:49.694Z (about 1 month ago)
• Topics: css, vue
• Language: HTML
• Size: 2.59 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nly-accordion

>支持初始化撑开多个折叠版,点击任意一个之后会将其他撑开的都关闭。

>初始撑开为props 参数visible=true

>后续会更新支持多个不同手风琴，支持开启手风琴模式

* ####先看效果：

![效果图](https://upload-images.jianshu.io/upload_images/9915084-a04496d16d1d1049.gif?imageMogr2/auto-orient/strip)

> * 支持初始化撑开多个折叠版,点击任意一个之后会将其他撑开的都关闭。

> * 初始撑开为props 参数visible=true

> * 后续会更新支持多个不同手风琴，支持开启手风琴模式

# 结构

- * ######边侧导航栏结构

```html

  

    Nejinn

  

  

    Nejinn

  

  

    

      lerity

    

    

      blog

    

  

```

- * ###### 只有手风琴折叠版的结构

```html

<任意元素 v-nly-accordion.collapseId>

任意元素元素>

    ...嵌套元素,随意插入

demo:

点击我收起或展开 collapse1


  我是折叠版中的元素

点击我收起或展开collapse2


  我是折叠版中的元素

使用这种结构的时候,请注意自己写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](https://cli.vuejs.org/config/).