<p><code></p> <p>这是今天看到的一个不错的vue组件。感觉用来做首页图片和文字的展示,或者是宣传网站对产品的不同特性的展示都是一个很生动的展现方法。<a href="http://www.wheelsfactory.cn/#/detail?id=85" rel="nofollow noreferrer" target="_blank">vue-accordion</a>的设计风格和轮播图类似。它可以支持用户自定义样式类。</p> <p><span class="img-wrap"><img data-src="/img/bVQ9v3?w=1824&amp;h=674" src="/img/bVQ9v3?w=1824&amp;h=674" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <h2 id="articleHeader0">安装</h2> <p>通过NPM安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-accordion " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> vue-accordion </code></pre> <p>将它引入到你的应用中</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import {vueAccordion} from 'vue-accordion' Vue.component('vue-accordion', vueAccordion) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> {vueAccordion} <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-accordion'</span> Vue.component(<span class="hljs-string">'vue-accordion'</span>, vueAccordion) </code></pre> <p>Browser global</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script scr=&quot;path/to/vue.js&quot;></script><br /> <script src=&quot;path/to/dist/vue-accordion.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"path/to/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/dist/vue-accordion.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>注册组件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" Vue.component('vue-accordion', vueAccordion) var vm = new Vue({ ... }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code> <span class="hljs-type">Vue</span>.component(<span class="hljs-symbol">'vue</span>-accordion', vueAccordion) <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> <span class="hljs-type">Vue</span>({ ... }); </code></pre> <h2 id="articleHeader1">使用组件</h2> <p>这是一个简单应用的例子</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-accordion :items=&quot;items&quot; :accordionClass=&quot;acClass&quot; :styles=&quot;styles&quot;></vue-accordion><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code>&lt;vue-accordion <span class="hljs-symbol">:items=<span class="hljs-string">"items"</span></span> <span class="hljs-symbol">:accordion<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>=<span class="hljs-string">"acClass"</span></span> <span class="hljs-symbol">:styles=<span class="hljs-string">"styles"</span>&gt;&lt;/vue-accordion&gt;</span> </code></pre> <p>当accordion组件被渲染之后,它将生成一个这样的结构</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div class=&quot;vue-accordion&quot;> <ul> <!-- First menu item--></p> <li> <a></p> <h2>...</h2> <p>...</p> <p> </a> </li> <p> <!-- Second menu item--></p> <li> <a></p> <h2>...</h2> <p>...</p> <p> </a> </li> <p> ... </ul> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vue-accordion"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-comment">&lt;!-- First menu item--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-comment">&lt;!-- Second menu item--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> ... <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre> <p><a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>将基于这个结构</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=".vue-accordion { ... } .vue-accordion ul { ... } ... .vue-accordion ul li a h2 { ... } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs r"><code>.vue-accordion { <span class="hljs-keyword">...</span> } .vue-accordion ul { <span class="hljs-keyword">...</span> } <span class="hljs-keyword">...</span> .vue-accordion ul li a h2 { <span class="hljs-keyword">...</span> } </code></pre> <p>如果需要修改样式,可以看下'accordion<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>'和'styles'这两个参数配置</p> <p><a href="http://www.wheelsfactory.cn/" rel="nofollow noreferrer" target="_blank">轮子工厂</a>--一个分享优秀的vue,angular组件的网站</p> <p></code></p>

本文固定链接:

Vue的手风琴组件–优雅的展示图片以及文字的方式

http://www.js-code.com/vue-js/vue-js_24935.html

80%的人都看过