vue.js手风琴_Vue.js 2插件允许开发人员创建非常自定义的手风琴灯

vue.js手风琴

Vue崩溃 (Vue Collapse)

Vue.js 2 plugin allowing developers to create very custom accordion lists. It is meant to be very flexible and easy to customize accordion plugin. Plugin itself does not provide any styling for any components or elements. The only included css supports the most basic slide up and down animation using the max-height and the transition properties. VueCollapse is rather a tool for developers who need to create custom accordion list.

Vue.js 2插件允许开发人员创建非常自定义的手风琴列表。 这意味着它非常灵活并且易于定制手风琴插件。 插件本身不为任何组件或元素提供任何样式。 唯一包含的css使用max-height和transition属性支持最基本的上下滑动动画。 对于需要创建自定义手风琴列表的开发人员而言，VueCollapse是一种工具。

View demo 查看演示 Download Source 下载源

安装 (Installation)

1. Download the npm package

   下载npm软件包

   
   
   

   npm install vue2-collapse

   npm install vue2-collapse

2. Import and install plugin with API provided by Vue.js

   使用Vue.js提供的API导入和安装插件

import VueCollapse from 'vue2-collapse'

import VueCollapse from 'vue2-collapse'

Vue.use(VueCollapse);

Vue.use(VueCollapse);

Pug的简单用法： (Simple usage with Pug:)

Without grouping:

不分组：

ul
  ...
  li > v-collapse-wrapper
    .title(v-collapse-toggle) List element title
    .content(v-collapse-content) This content which will be toggled
  ...

With a group

与一群

v-collapse-group
    ul
      ...
      li > v-collapse-wrapper
        .title(v-collapse-toggle) List element title
        .content(v-collapse-content) This content which will be toggled
      ...

With a custom toggle element outside the wrapper

在包装器外部具有自定义切换元素

button(v-collapse-toggle="'custom_toggler'") Open my element
v-collapse-group
    ul
      ...
      li > v-collapse-wrapper
        .title(v-collapse-toggle) List element title
        .content(v-collapse-content, ref="'custom_toggler'") This content which will be toggled
      ...

插件元素 (Plugin elements)

VueCollapse contains components and directives which provide easy way of building accordions:

VueCollapse包含一些组件和指令，它们提供了构建手风琴的简便方法：

组件 (Components)

v-collapse-wrapper (v-collapse-wrapper)

描述： (Description:)

Wrapper component which should always be a parent of elements with v-collapse-content and v-collapse-toggle directives.

包装器组件，应始终是带有v-collapse-content和v-collapse-toggle指令的元素的父v-collapse-toggle 。

v-collapse-group (v-collapse-group)

描述： (Description:)

This is a group component. Sometimes there is a need of creating several different accordion lists. Grouping list elements helps with more complex cases. Components stores list of all elements in the accordion.

这是一个组组件。 有时需要创建几个不同的手风琴列表。 对列表元素进行分组有助于处理更复杂的情况。 组件存储手风琴中所有元素的列表。

指令 (Directives)

v-collapse-content (v-collapse-content)

描述： (Description:)

This directive ought to be applied on the DOM element which will contain content of single list element. Only this element will be able to be toggled on and off within wrapper component. Element with this directive should not be a parent of the element with v-collapse-toggle directive

该指令应应用于包含单个列表元素内容的DOM元素。 只有这个元素就能包装部件内打开和关闭，以进行切换。 元素这个指令不应该是元素与父母v-collapse-toggle指令

v-collapse-toggle (v-collapse-toggle)

描述： (Description:)

The directive changes a default behavior of the element and allows to click on it in order to toggle list element. Note that this directive should be located within the <v-collapse-wrapper></v-collapse-wrapper> in order to make it working without manual binding. However if it is needed to create a toggle element somewhere else, not inside the wrapper component you can use vue's reference to make it work.

该指令更改元素的默认行为，并允许单击它以切换列表元素。 请注意，此指令应位于<v-collapse-wrapper></v-collapse-wrapper>中，以使其无需手动绑定即可工作。 但是，如果需要在其他地方而不是包装器组件内部创建一个toggle元素，则可以使用vue的引用来使其工作。

TODO: COMPLEX USAGE, CONFIGURATION, DEMOS.

待办事项：复杂的用法，配置，演示。

翻译自: https://vuejsexamples.com/vue-js-2-plugin-allowing-developers-to-create-very-custom-accordion-lits/

vue.js手风琴