刚开始学习 vue和 muse-ui 的小白...
效果图点击上图右侧的遮罩层隐藏侧边栏。
直接复制官网的示例代码到 app.vue
中是完全没问题的,但是当我把侧边栏封装为一个组件Sidebar,点击遮罩层就不管用了!
一开始我的组件代码是这样的:
<template>
<!-- <div class="sidebar"> -->
<mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
<mu-appbar title="Title"></mu-appbar>
<mu-list>
<mu-list-item button>
<mu-list-item-title>Menu Item 1</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Menu Item 2</mu-list-item-title>
</mu-list-item>
<mu-list-item @click="changeOpen" button>
<mu-list-item-title>Close</mu-list-item-title>
</mu-list-item>
</mu-list>
</mu-drawer>
<!-- </div> -->
</template>
<script>
export default {
name: 'sidebar',
props: ['show'],
data(){
return {
docked: false,
position: 'left'
}
},
computed: {
open: {
get() {
return this.show;
}
}
},
components: {
},
methods: {
changeOpen(){
this.$emit('changeState','参数')
}
}
}
</script>
然后就报错了。。。说 computed 里面的 open 要写set
error
我只好加个set,但是我不知道要往哪里设值,所以set 里面啥也没写。
get() {
return this.show;
},
set(value) {
}
}
但是点击遮罩层还是没有作用,中间经过了无数过程,我发现每次点击遮罩层的时候会调用刚刚上面写的 set 方法,并且传递了 false 进来,于是我就在set 里调用了 changeOpen 方法(请看第二张图的methods),这个方法是向父级请求变更侧边栏状态,终于成功了。。。
最终代码:
<template>
<!-- <div class="sidebar"> -->
<mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
<mu-appbar title="Title"></mu-appbar>
<mu-list>
<mu-list-item button>
<mu-list-item-title>Menu Item 1</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Menu Item 2</mu-list-item-title>
</mu-list-item>
<mu-list-item @click="changeOpen" button>
<mu-list-item-title>Close</mu-list-item-title>
</mu-list-item>
</mu-list>
</mu-drawer>
<!-- </div> -->
</template>
<script>
export default {
name: 'sidebar',
props: ['show'],
data(){
return {
docked: false,
position: 'left'
}
},
computed: {
open: {
get() {
return this.show;
},
set(value) {
this.changeOpen();
}
}
},
components: {
},
methods: {
changeOpen(){
this.$emit('changeState','参数')
}
}
}
</script>
网友评论