feat(DaoPanel): add close button

DaoCloud · May 9, 2018 · eddbbb2 · eddbbb2
1 parent a578017
commit eddbbb2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/components/dao-panel/dao-panel-nav/dao-panel-nav.vue b/src/components/dao-panel/dao-panel-nav/dao-panel-nav.vue
@@ -7,7 +7,12 @@
       :key="index">
       {{ name }}
     </li>
-    <li class="dao-panel-nav-icon first" @click="changeSize('l')" :class="{ active: activeSize === 'l' }">
+    <li class="dao-panel-nav-icon first" @click="close">
+      <span class="icon">
+        <svg><use xlink:href="#icon_close"></use></svg>
+      </span>
+    </li>
+    <li class="dao-panel-nav-icon" @click="changeSize('l')" :class="{ active: activeSize === 'l' }">
       <span class="icon">
         <svg><use xlink:href="#icon_panel-size-large"></use></svg>
       </span>
@@ -52,6 +57,9 @@ export default {
     changeSize(size) {
       this.$parent.changeSize(size);
     },
+    close() {
+      this.$parent.$emit('update:visible', false);
+    },
   },
 };
 </script>

diff --git a/src/components/dao-panel/dao-panel.html b/src/components/dao-panel/dao-panel.html
@@ -1,4 +1,4 @@
-<div class="dao-panel" :style="{ height: height + 'px', minHeight: minHeight }">
+<div class="dao-panel" :style="{ height: height + 'px', minHeight: minHeight }" v-if="visible">
     <div class="dao-panel-header">
         <dao-panel-nav :tabList="tabList"></dao-panel-nav>
     </div>

diff --git a/src/components/dao-panel/dao-panel.vue b/src/components/dao-panel/dao-panel.vue
@@ -15,6 +15,11 @@ export default {
       default: '',
     },
 
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+
     size: {
       type: String,
       default: 'm',