搜索结果列表页面开发

src/components/Panel/README.md

@@ -0,0 +1,29 @@
+# Panel组件
+
+### 说明
+1. Panel组件对应了所有带边框的块状元素，通过slot插槽，可以插入
+2. Panel组件已经默认全局引入，使用前无需再次声明
+
+``` js
+  <Panel>
+    这是Panel常见的用法，body内容直接写在标签里面
+    <template #header>#header</template>
+    <template #headerRight>#headerRight</template>
+  </Panel>
+```
+
+### Props
+
+| 参数      | 说明                | 类型      | 可选值      | 默认值      |
+|----------|---------------------|----------|------------|------------|
+| blank    | body区域使用padding  | boolean   |            | true      |
+
+### Slots
+
+| 名称           | 说明                                                    |
+|---------------|---------------------------------------------------------|
+| default       | body内容插槽。传入blank:false时，body插槽padding将设为0      |
+| header        | 头部内容插槽，默认居左。header类插槽全部不启用时，header将被隐藏 |
+| headerCenter  | 头部内容居中的插槽                                         |
+| headerRight   | 头部内容居右的插槽                                         |
+| footer        | 底部插槽，居左对齐。不传入则不会显示footer                    |

src/components/Panel/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="g-panel g-border bg-white" :class="{'g-panel-use-header': hasHeader, 'g-panel-use-footer': hasFooter, 'g-panel-no-blank': !blank }">
+    <!-- header: header / headerCenter / headerRight -->
+    <div v-if="hasHeader" class="g-panel-header">
+      <!-- slot： #header -->
+      <div class="g-panel-header-left">
+        <slot name="header"></slot>
+      </div>
+      <!-- slot： #header -->
+      <div class="g-panel-header-center">
+        <slot name="headerCenter"></slot>
+      </div>
+      <!-- slot： #headerRight -->
+      <div class="g-panel-header-right">
+        <slot name="headerRight"></slot>
+      </div>
+    </div>
+    <!-- slot: #default -->
+    <div class="g-panel-body" >
+      <slot name="default"></slot>
+    </div>
+    <!-- slot： #footer-->
+    <div v-if="hasFooter" class="g-panel-footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useSlots, computed } from 'vue';
+
+defineProps({
+  blank: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const $slots = useSlots();
+const hasHeader = computed(() => !!($slots.header || $slots.headerCenter || $slots.headerRight));
+const hasFooter = computed(() => !!$slots.footer);
+</script>
+
+<style lang="scss" scoped>
+@import 'devui-theme/styles-var/devui-var.scss';
+.g-panel {
+  &-body {
+    background-color: $devui-base-bg;
+    padding: 20px;
+    overflow: auto;
+  }
+  &-header {
+    // background-image: var(--color-linear100);
+    border-bottom: 1px solid var(--color-G300);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+  }
+  &-footer {
+    padding: 10px 20px;
+    background: var(--color-linear100, #f5f7f9);
+  }
+  &-use-header {
+    .g-panel-body {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+    }
+  }
+  &-use-footer {
+    .g-panel-body {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: none;
+    }
+  }
+  &-no-blank {
+    .g-panel-body {
+      padding: 0 !important;
+    }
+  }
+}
+</style>