Browse Source

fix: BsUi-修改组件

hanxiaohui 4 months ago
parent
commit
5183d6fbdc
2 changed files with 79 additions and 2 deletions
  1. 74 0
      src/components/BsUi/Catalog/index.vue
  2. 5 2
      src/components/BsUi/index.js

+ 74 - 0
src/components/BsUi/Catalog/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="d-catalog">
+    <div class="d-header">
+      <span>{{ title }}</span>
+
+      <div class="h-right" v-if="slots.headerRight">
+        <a-space>
+          <slot name="headerRight"></slot>
+        </a-space>
+      </div>
+    </div>
+
+    <div class="d-content" v-if="slots.content">
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { useSlots } from "vue";
+
+  const props = defineProps({
+    title: {
+      required: true,
+      default: '标题',
+    },
+  });
+
+  const slots = useSlots()
+
+</script>
+
+<style lang="scss" scoped>
+  .d-catalog {
+    width: 100%;
+    height: 100%;
+
+    .d-header {
+      font-size: 16px;
+      font-weight: 600;
+      padding: 10px 0 10px 10px;
+      border-bottom: 1px solid #e4e7ed;
+      cursor: pointer;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      &::before {
+        width: 4px;
+        height: 18px;
+        background: var(--vxe-ui-font-primary-color);
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        content: '';
+        border-radius: 4px;
+      }
+
+      .h-right {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+
+    .d-content {
+      width: 100%;
+      height: 100%;
+      padding: 20px 0;
+    }
+  }
+</style>

+ 5 - 2
src/components/BsUi/index.js

@@ -13,6 +13,7 @@ import BsTabs from "./Tabs/index.vue"
 import BsEllipsisText from "./EllipsisText/index.vue"
 import BsDicTag from "./DicTag/index.vue"
 import BsLink from "./Link/index.vue"
+import BsCatalog from "./Catalog/index.vue"
 
 const BsUi = {
   install(app) {
@@ -28,7 +29,8 @@ const BsUi = {
     app.component('BsTabs', BsTabs);
     app.component('BsEllipsisText', BsEllipsisText);
     app.component('BsDicTag', BsDicTag);
-    app.component('BsDicTag', BsLink)
+    app.component('BsLink', BsLink);
+    app.component('BsCatalog', BsCatalog)
   },
 };
 
@@ -53,5 +55,6 @@ export {
   BsTabs,
   BsEllipsisText,
   BsDicTag,
-  BsLink
+  BsLink,
+  BsCatalog
 };