作者:爱到最后还是分离_851 | 来源:互联网 | 2023-09-01 21:38
这是今天看到的一个不错的vue组件。感觉用来做首页图片和文字的展示,或者是宣传网站对产品的不同特性的展示都是一个很生动的展现方法。vue-accordion的设计风格和轮播图类似。
这是今天看到的一个不错的vue组件。感觉用来做首页图片和文字的展示,或者是宣传网站对产品的不同特性的展示都是一个很生动的展现方法。vue-accordion的设计风格和轮播图类似。它可以支持用户自定义样式类。
安装
通过NPM安装
npm install vue-accordion
将它引入到你的应用中
import Vue from 'vue'
import {vueAccordion} from 'vue-accordion'
Vue.component('vue-accordion', vueAccordion)
Browser global
注册组件
Vue.component('vue-accordion', vueAccordion)
var vm = new Vue({
...
});
使用组件
这是一个简单应用的例子
当accordion组件被渲染之后,它将生成一个这样的结构
CSS将基于这个结构
.vue-accordion {
...
}
.vue-accordion ul {
...
}
...
.vue-accordion ul li a h2 {
...
}
如果需要修改样式,可以看下’accordionClass’和’styles’这两个参数配置
轮子工厂–一个分享优秀的vue,angular组件的网站