@@@@@@

library/components/VabDivider/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <blockquote
+    v-if="blockquote"
+    class="vab-blockquote"
+    :class="isBorder ? 'vab-blockquote-' + type + ' is-border' : 'vab-blockquote-' + type"
+  >
+    <slot></slot>
+  </blockquote>
+  <fieldset v-else-if="fieldset" class="vab-fieldset">
+    <legend>{{ title }}</legend>
+    <slot></slot>
+  </fieldset>
+  <el-divider v-else :border-style="borderStyle" :content-position="contentPosition" :direction="direction">
+    <template #default>
+      <slot></slot>
+    </template>
+  </el-divider>
+</template>
+
+<script setup>
+import { ElDivider } from 'element-plus'
+
+defineOptions({
+  name: 'VabDivider',
+})
+
+defineProps({
+  ...ElDivider.props,
+  blockquote: {
+    type: Boolean,
+    default: false,
+  },
+  fieldset: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'primary', // 类型： primary / success / warning / danger / info
+  },
+  isBorder: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.vab-blockquote {
+  width: 100%;
+  padding: 15px;
+  margin: 0 0 10px 0;
+  line-height: 1.8;
+  background-color: var(--el-background-color);
+  border-left: 5px solid var(--el-color-primary);
+  border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
+
+  &-primary {
+    border-left: 5px solid var(--el-color-primary);
+  }
+
+  &-success {
+    border-left: 5px solid var(--el-color-success);
+  }
+
+  &-warning {
+    border-left: 5px solid var(--el-color-warning);
+  }
+
+  &-danger {
+    border-left: 5px solid var(--el-color-danger);
+  }
+
+  &-info {
+    border-left: 5px solid var(--el-color-info);
+  }
+
+  &.is-border {
+    border-top: 1px solid var(--el-border-color);
+    border-right: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
+  }
+}
+
+.vab-fieldset {
+  padding: var(--el-padding);
+  margin-bottom: 10px;
+  border: 1px solid var(--el-border-color);
+
+  legend {
+    padding: 0 var(--el-padding) 0 var(--el-padding);
+  }
+}
+</style>