美文网首页
使用 mu-drawer 编写侧边栏SideBar

使用 mu-drawer 编写侧边栏SideBar

作者: 阳光小羊羊的草场 | 来源:发表于2019-05-26 09:12 被阅读0次

    刚开始学习 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>
    

    相关文章

      网友评论

          本文标题:使用 mu-drawer 编写侧边栏SideBar

          本文链接:https://www.haomeiwen.com/subject/isfxtctx.html