@ebiz/designer-components 0.0.19-beta.15 → 0.0.19-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.19-beta.15",
+  "version": "0.0.19-beta.16",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizTdesignLoading.vue

@@ -0,0 +1,108 @@
+<template>
+    <t-loading :delay="delay" :duration="duration" :indicator="indicator" :inherit-color="inheritColor" :layout="layout"
+        :loading="loading" :loading-props="loadingProps" :pause="pause" :reverse="reverse" :show-overlay="showOverlay"
+        :size="size" :text="text" :theme="theme">
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 文本内容插槽 -->
+        <template v-if="$slots.text" #text>
+            <slot name="text"></slot>
+        </template>
+
+        <!-- 加载指示器插槽 -->
+        <template v-if="$slots.indicator" #indicator>
+            <slot name="indicator"></slot>
+        </template>
+
+        <!-- 加载内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+    </t-loading>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignLoading"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Loading as TLoading } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+    delay: {
+        type: Number,
+        default: 0
+    },
+    // 加载动画执行完成一次的时间，单位：毫秒
+    duration: {
+        type: Number,
+        default: 800
+    },
+    // 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+    indicator: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 是否继承父元素颜色
+    inheritColor: {
+        type: Boolean,
+        default: false
+    },
+    // 对齐方式
+    layout: {
+        type: String,
+        default: 'horizontal',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: true
+    },
+    // 透传加载组件全部属性
+    loadingProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否暂停动画
+    pause: {
+        type: Boolean,
+        default: false
+    },
+    // 加载动画是否反向
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 是否需要遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 尺寸，示例：small/medium/large/12px/56px
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    // 加载提示文案
+    text: {
+        type: String,
+        default: ''
+    },
+    // 加载组件类型
+    theme: {
+        type: String,
+        default: 'circular',
+        validator: (val) => ['circular', 'spinner', 'dots', 'bar'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/index.js

@@ -57,6 +57,7 @@ import EbizTreeSelector from './components/EbizTreeSelector.vue';
 import EbizTimePicker from './components/EbizTimePicker.vue';
 import EbizPopconfirm from './components/EbizPopconfirm.vue';
 import EbizTreeMergeTable from './components/EbizTreeMergeTable.vue';
+import EbizTdesignLoading from './components/EbizTdesignLoading.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
@@ -181,5 +182,6 @@ export {
   // 新增 EbizDescriptions 和 EbizDescriptionsItem
   EbizDescriptions,
   EbizDescriptionsItem,
-  TDescriptionsItem
+  TDescriptionsItem,
+  EbizTdesignLoading
 };