Эх сурвалжийг харах

fix: BsUi-基础组件增加列表和渲染布局

hanxiaohui 4 сар өмнө
parent
commit
b8e031f36a

+ 13 - 0
src/components/BsUi/ContentsWrapper/index.vue

@@ -0,0 +1,13 @@
+<template >
+  <div class="content-wrap">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

+ 49 - 0
src/components/BsUi/Descriptions/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="description">
+    <div class="d-title">{{ title }}</div>
+    <a-descriptions :bordered="false">
+      <a-descriptions-item v-for="(item, index) in items" :key="index" v-bind="item.extraProps">
+        <template #label>
+          <slot v-if="item.labelSlot" :name="item.labelSlot"></slot>
+          <span v-else>{{ item.label }}</span>
+        </template>
+
+        <template v-if="item.valueSlot">
+          <slot :name="item.valueSlot"></slot>
+        </template>
+        <template v-if="!item.valueSlot">
+          {{ item.value }}
+        </template>
+      </a-descriptions-item>
+    </a-descriptions>
+  </div>
+</template>
+<script setup>
+  const props = defineProps({
+    title: {
+      required: true,
+      default: '',
+    },
+    items: {
+      required: true,
+      default: [],
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .description {
+    width: 100%;
+    .d-title {
+      font-size: 16px;
+      font-weight: 600;
+      padding: 0 0 10px 0;
+    }
+    :deep(.ant-descriptions-header) {
+      margin: 0 0 10px 0;
+    }
+    :deep(.ant-descriptions-item) {
+      margin: 0 0 10px 0;
+      padding: 0;
+    }
+  }
+</style>

+ 13 - 0
src/components/BsUi/Descriptions/item/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="item">
+
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

+ 6 - 0
src/components/BsUi/index.js

@@ -7,6 +7,8 @@ import BsTable, { useBsTable } from './Table/index.js';
 import BsDrawer, { useBsDrawer } from './Drawer/index.js';
 import BsForm, { useBsForm } from './Form/index.js';
 import BsModalTableSelector from './ModalTableSelector/index.vue';
+import BsDescriptions from "./Descriptions/index.vue"
+import BsContentsWrapper from "./ContentsWrapper/index.vue"
 
 const BsUi = {
   install(app) {
@@ -17,6 +19,8 @@ const BsUi = {
     app.component('BsTable', BsTable);
     app.component('BsDrawer', BsDrawer);
     app.component('BsModalTableSelector', BsModalTableSelector);
+    app.component('BsDescriptions', BsDescriptions)
+    app.component('BsContentsWrapper', BsContentsWrapper)
   },
 };
 
@@ -36,4 +40,6 @@ export {
   BsModalTableSelector,
   BsForm,
   useBsForm,
+  BsDescriptions,
+  BsContentsWrapper
 };