一. 大致的使用方法
<div id="app" style="padding-left: 100px">
<g-collpase>
<g-collapse-item title="标题1">内容1</g-collapse-item>
<g-collapse-item title="标题2">内容2</g-collapse-item>
<g-collapse-item title="标题3">内容3</g-collapse-item>
</g-collpase>
</div>
二. 完成最外部的样式
//collapse
<style lang="scss" scoped>
$grey: #ddd;
$border-radius: 4px;
.collapse {
border: 1px solid $grey;
border-radius: $border-radius;
}
</style>
//collapse-item.vue
<style lang="scss" scoped>
$grey: #ddd;
$border-radius: 4px;
.collapseItem {
> .title {
border: 1px solid $grey;
margin-top: -1px;
margin-left: -1px;
margin-right: -1px;
}
&:first-child {
> .title {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
}
</style>
三. 进一步调节样式
// collapse-item
<style lang="scss" scoped>
$grey: #ddd;
$border-radius: 4px;
.collapseItem {
> .title {
border: 1px solid $grey;
margin-top: -1px;
margin-left: -1px;
margin-right: -1px;
min-height: 32px;
display: flex;
align-items: center;
padding: 0 8px;
}
&:first-child {
> .title {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
> .content{
padding: 8px;
}
}
</style>
四. 默认内容折叠起来和点击切换，基本样式和基本功能完成
// collapse-item
data (){
return {
open: false
}
}
<div class="content" v-if="open" @click="open=!open">
<slot></slot>
</div>
五. 完善功能第一个点开,第二个就关闭
因为结构比较简单，就父子两个组件，可以用父子通信来做。
mounted(){
this.eventBus.$on('update:selected', (vm)=>{
if (vm !== this){
this.close()
}
})
},
methods:{
toggle(){
if(this.open) {
this.open = false
}else{
this.open = true
this.eventBus.$emit('update:selected', this)
}
},
close(){
this.close()
}
}
六. 增加功能是否可以选择多个
方案一.用 single 变量是否需要控制 eventBus
// 添加single选项,有single就注入，没有就不注入
// 但是这种方式不太完美会有警告
props: {
single: {
type: Boolean,
default: false
}
},
provide() {
if(this.single){
return {
eventBus: this.eventBus
}
}
}
七. 可以设置默认 selected
// index.html
<div id="app" style="padding: 100px">
<g-collapse selected="2">
<g-collapse-item title="标题1" name="1">内容1</g-collapse-item>
<g-collapse-item title="标题2" name="2">内容2</g-collapse-item>
<g-collapse-Item title="标题3" name="3">内容3</g-collapse-Item>
</g-collapse>
</div>
// collapse-item.vue
mounted(){
this.eventBus && this.eventBus.$on('update:selected', (name)=>{
if (name !== this.name){
this.close()
}else{
this.show()
}
})
},
八. 回头解决子元素是否可以多个打开
通过 collapse.vue 传给 collapse-item
// index.js
<div id="app" style="padding: 100px">
<g-collapse :selected="selectedTab" :selected.sync="selectedTab" single>
<g-collapse-item title="标题1" name="1">内容1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequatur </g-collapse-item>
<g-collapse-item title="标题2" name="2">内容2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate dolore d! </g-collapse-item>
<g-collapse-Item title="标题3" name="3"> 内容3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, magnam. </g-collapse-Item>
{{selectedTab}}
</g-collapse>
</div>
// collapse.vue
mounted(){
this.eventBus.$emit('update:selected',this.selected)
this.eventBus.$on('update:selected', (name)=>{
this.$emit('update:selected',name)
})
this.$children.forEach((vm)=>{
vm.single = this.single
console.log(vm)
})
}
// collapse-item.vue
mounted(){
this.eventBus && this.eventBus.$on('update:selected', (name)=>{
if (name !== this.name){
if(this.single){
this.close()
}
}else{
this.show()
}
})
},
9.进一步修改，把选中的值改为数组
// collapse.vue
mounted(){
this.eventBus.$emit('update:selected',this.selected)
this.eventBus.$on('update:addSelected', (name)=>{
this.selected.push(name)
this.eventBus.$emit('update:selected',this.selected) // 通知儿子
this.$emit('update:selected',this.selected) // 通知外面
})
this.eventBus.$on('update:removeSelected', (name)=>{
let index = this.selected.indexOf(name)
this.selected.splice(index,1)
this.eventBus.$emit('update:selected',this.selected)
this.$emit('update:selected',this.selected)
})
this.$children.forEach((vm)=>{
vm.single = this.single
console.log(vm)
})
}
// collapse-item.vue
methods:{
toggle(){
if(this.open) {
this.open = false
this.eventBus && this.eventBus.$emit('update:removeSelected', this.name)
// 移除一个被选中的东西
}else{
this.eventBus && this.eventBus.$emit('update:addSelected', this.name)
}
},
}
10. 将所有数据流让父组件统一管理。
不能直接操作 props 要先深拷贝
// collapse.vue
mounted(){
this.eventBus.$emit('update:selected',this.selected)
this.eventBus.$on('update:addSelected', (name)=>{
let selectedCopy = JSON.parse(JSON.stringify(this.selected))
if(this.single){
selectedCopy = [name]
}else{
selectedCopy.push(name)
}
this.eventBus.$emit('update:selected',selectedCopy) // 通知儿子
this.$emit('update:selected',selectedCopy) // 通知外面
})
this.eventBus.$on('update:removeSelected', (name)=>{
let selectedCopy = JSON.parse(JSON.stringify(this.selected))
let index = selectedCopy.indexOf(name)
selectedCopy.splice(index,1)
this.eventBus.$emit('update:selected',selectedCopy)
this.$emit('update:selected',selectedCopy)
})
this.$children.forEach((vm)=>{
vm.single = this.single
console.log(vm)
})
}
11. 数据流的核心
不要出现两个东西互相让对方更新的状态
// collapse.vue 爸爸
mounted(){
this.eventBus.$emit('update:selected',this.selected) // 一开始就通知所有儿子，该选中就选中
this.eventBus.$on('update:addSelected', (name)=>{
let selectedCopy = JSON.parse(JSON.stringify(this.selected))
// 如果用户添加一个我就把selected拷贝一份，因为vue不支持直接修改props
if(this.single){
selectedCopy = [name]
}else{
selectedCopy.push(name)
}
this.eventBus.$emit('update:selected',selectedCopy) // 得到最新被选中的item之后,通知儿子
this.$emit('update:selected',selectedCopy) // 通知外面
})
this.eventBus.$on('update:removeSelected', (name)=>{
let selectedCopy = JSON.parse(JSON.stringify(this.selected))
let index = selectedCopy.indexOf(name)
selectedCopy.splice(index,1)
this.eventBus.$emit('update:selected',selectedCopy) // 如果用户想移除，也通知他儿子该移除就移除
this.$emit('update:selected',selectedCopy)
})
this.$children.forEach((vm)=>{
vm.single = this.single
console.log(vm)
})
}¡
// collapse-item.vue 儿子
mounted(){
this.eventBus && this.eventBus.$on('update:selected', (names)=>{
// 监听eventBus,只要他爸爸要说更新，他就更新
console.log(names)
if (names.indexOf(this.name )>= 0){
this.open = true
}else{
this.open = false
}
})
},
methods:{
toggle(){
if(this.open) {
// 这里也没有修改自己的OPEN，而是在mounted中等爸爸通知我们修改open,所以他的open永远是爸爸在操作，儿子不操作
this.eventBus &&this.eventBus.$emit('update:removeSelected', this.name)
// 他自己触发一个意图，打算移除一个更新
// 移除一个被选中的东西
}else{
this.eventBus && this.eventBus.$emit('update:addSelected', this.name)
// 他自己触发一个意图，打算添加一个更新
}
},
}
本文由博客一文多发平台 OpenWrite 发布！
Vuetify基于vue2.0,为移动而生的组件框架
Vuetify 支持SSR（服务端渲染）,SPA（单页应用程序）,PWA（渐进式Web应用程序）和标准HTML页面。 Vuetify是一个渐进式的框架，试图推动前端开发发展到一个新的水平。
Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法
通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数，slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来
react 函数子组件(Function ad Child Component)
函数子组件（FaCC ）与高阶组件做的事情很相似， 都是对原来的组件进行了加强，类似装饰者。FaCC，利用了react中children可以是任何元素，包括函数的特性，那么到底是如何进行增强呢？
Vue和React组件之间的传值方式
在现代的三大框架中，其中两个Vue和React框架，组件间传值方式有哪些？组件间的传值是灵活的，可以有多种途径，父子组件同样可以使用EventBus，Vuex或者Redux
vue.js自定义组件directives
自定义指令：以v开头，如：v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作，观察bind函数，它将指令绑定的DOM作为一个参数，在函数体中，直接操作DOM节点为input赋值。
vue中prop属性传值解析
prop的定义：在没有状态管理机制的时候，prop属性是组件之间主要的通信方式，prop属性其实是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型，也可以定义属性的初始值。
Web组件简介
Web组件由三个独立的技术组成：自定义元素。很简单，这些是完全有效的HTML元素，包含使用一组JavaScript API制作的自定义模板，行为和标记名称（例如，<one-dialog>）。
web组件调用其他web资源
web组件可以直接或间接的调用其他web资源。一个web组件通过内嵌返回客户端内容的另一个web资源的url来间接调用其他web资源。在执行时，一个web资源通过包含另一个资源的内容或者转发请求到另一个资源直接调用。
vue中如何实现的自定义按钮
在实际开发项目中，有时我们会用到自定义按钮；因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就派上了大用场，我们把定义好的按钮组件导出，在全局引用，就可以在其他组件随意使用啦，这样可以大幅度的提高我们的工作效率。
Vue子组件调用父组件的方法
Vue中子组件调用父组件的方法，这里有三种方法提供参考,第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法，第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!