save

 <div id="product-list">
 <div id="product-list">
     <Sort></Sort>
     <Sort></Sort>
     <List url="/product/list" :query='{a:1}'></List>
     <List url="/product/list" :query='{a:1}'></List>
+    <div class="drawer-slide">
+        <div class="drawer-main">
+            <filter></filter>
+        </div>
+    </div>
 </div>
 </div>

 const Vue = require('yoho-vue');
 const Vue = require('yoho-vue');
-const Sort = require('component/sort.vue');
-const List = require('component/list.vue');
+const sort = require('component/sort.vue');
+const list = require('component/list.vue');
+const filter = require('component/filter.vue');
 
 
 require('common/vue-filter');
 require('common/vue-filter');
 
 
 new Vue({
 new Vue({
     el: '#product-list',
     el: '#product-list',
     components: {
     components: {
-        List, Sort
+        list, sort, filter
     }
     }
 });
 });

+<template>
+    <div class="filter">
+        <div class="filter-actions">
+            <a href="javascript:; filter-action">清空</a>
+            <button class="button button-small filter-action">确定</button>
+        </div>
+        <div class="filter-params">
+            <ul class="filter-cates">
+                <li class="filter-cate" v-for="filter in filters">
+                    <i class="icon icon-right"></i>
+                    <span>{{filter.classfly}}</span>
+                    <span class="filter-cate-val">{{val[filter.key]}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+<style>
+@import "../../scss/common/color";
+
+.filter {
+    padding: 0 20px;
+}
+
+.filter-actions {
+    text-align: right;
+    padding: 10px 0;
+}
+
+.filter-action {
+    margin-left: 20px;
+}
+
+.filter-actions,
+.filter-cate {
+    border-bottom: 1px solid $grey;
+}
+
+.filter-cates {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.filter-cate {
+    .icon-right {
+        float: right;
+    }
+}
+
+.filter-cate-val {
+    float: right;
+}
+
+.filter-cate-val,
+.filter-cate .icon {
+    color: $grey;
+}
+</style>
+<script>
+module.exports = {
+    data: function() {
+        return {
+            val: {
+                brand: 'Supreme',
+                category: '夹克'
+            },
+            filters: [{
+                classfly: 'Brand品牌',
+                key: 'brand',
+                itemArray: []
+            }, {
+                classfly: 'Category品类',
+                key: 'category',
+                itemArray: []
+            }, {
+                classfly: 'Color颜色',
+                key: 'color',
+                itemArray: []
+            }, {
+                classfly: 'Size尺寸',
+                key: 'size',
+                itemArray: []
+            }]
+        };
+    }
+};
+</script>

@@ -28,6 +28,7 @@ module.exports = {
             type: String,
             type: String,
             required: true
             required: true
         },
         },
+        initData: Array, /* 初始数据, 应该只单次绑定, 然后fetch数据全靠url */
         query: Object /* 请求参数 */
         query: Object /* 请求参数 */
     },
     },
     data: function() {
     data: function() {
@@ -48,8 +49,13 @@ module.exports = {
             });
             });
         }
         }
     },
     },
-    ready: function() {
-        this.fetch();
+    created: function() {
+        // 有初始数据，用初始数据
+        if (this.initData) {
+            self.$set('products', self.products.concat(this.initData));
+        } else if (this.url) {
+            this.fetch();
+        }
     },
     },
 };
 };
 </script>
 </script>
@@ -109,4 +115,23 @@ module.exports = {
         color: $red;
         color: $red;
     }
     }
 }
 }
+
+.drawer-slide {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.drawer-main {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    min-width: 80%;
+    max-width: 100%;
+    background-color: #fff;
+}
 </style>
 </style>