@ebiz/designer-components 0.1.1 → 0.1.4

package/src/components/TdesignDialog.vue

@@ -1,226 +1,226 @@
-<template>
-    <t-dialog v-model:visible="isVisible" :attach="attach" :body="body" :cancel-btn="cancelBtn" :close-btn="closeBtn"
-        :close-on-esc-keydown="closeOnEscKeydown" :close-on-overlay-click="closeOnOverlayClick"
-        :confirm-btn="confirmBtn" :default-visible="defaultVisible" :destroy-on-close="destroyOnClose"
-        :draggable="draggable" :footer="footer" :header="header" :mode="mode" :placement="placement"
-        :show-overlay="showOverlay" :width="width" :z-index="zIndex" @cancel="handleCancel" @close="handleClose"
-        @close-btn-click="handleCloseBtnClick" @confirm="handleConfirm" @esc-keydown="handleEscKeydown"
-        @overlay-click="handleOverlayClick" @opened="handleOpened" @closed="handleClosed"
-        @update:visible="handleUpdateVisible">
-        <!-- 头部插槽 -->
-        <template v-if="$slots.header" #header>
-            <slot name="header"></slot>
-        </template>
-
-        <!-- 内容插槽 -->
-        <template v-if="$slots.body" #body>
-            <slot name="body"></slot>
-        </template>
-
-        <!-- 默认插槽 -->
-        <slot></slot>
-
-        <!-- 页脚插槽 -->
-        <template v-if="$slots.footer" #footer>
-            <slot name="footer"></slot>
-        </template>
-
-        <!-- 取消按钮插槽 -->
-        <template v-if="$slots.cancelBtn" #cancel-btn>
-            <slot name="cancelBtn"></slot>
-        </template>
-
-        <!-- 确认按钮插槽 -->
-        <template v-if="$slots.confirmBtn" #confirm-btn>
-            <slot name="confirmBtn"></slot>
-        </template>
-    </t-dialog>
-</template>
-
-<script>
-export default {
-    name: "EbizDialog"
-}
-</script>
-
-<script setup>
-import { ref, watch } from 'vue';
-import { Dialog as TDialog } from 'tdesign-vue-next';
-
-// 定义属性
-const props = defineProps({
-    // 对话框挂载的节点
-    attach: {
-        type: [String, Function, Element],
-        default: 'body'
-    },
-    // 对话框内容
-    body: {
-        type: [String, Function],
-        default: ''
-    },
-    // 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
-    cancelBtn: {
-        type: [String, Object, null],
-        default: ''
-    },
-    // 关闭按钮，值为 true 显示默认关闭按钮；值为 false 则不显示关闭按钮；值类型为 string 则直接显示值；值类型为 TNode，则显示自定义按钮
-    closeBtn: {
-        type: [Boolean, String, Function],
-        default: true
-    },
-    // 按下 ESC 时是否触发对话框关闭
-    closeOnEscKeydown: {
-        type: Boolean,
-        default: undefined
-    },
-    // 点击蒙层时是否触发关闭
-    closeOnOverlayClick: {
-        type: Boolean,
-        default: undefined
-    },
-    // 确认按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
-    confirmBtn: {
-        type: [String, Object, null],
-        default: ''
-    },
-    // 对话框默认是否显示
-    defaultVisible: {
-        type: Boolean,
-        default: false
-    },
-    // 是否在关闭弹框的时候销毁子元素
-    destroyOnClose: {
-        type: Boolean,
-        default: false
-    },
-    // 对话框是否可以拖拽
-    draggable: {
-        type: Boolean,
-        default: false
-    },
-    // 底部操作栏，默认会有"确认"和"取消"两个按钮
-    footer: {
-        type: [Boolean, Function],
-        default: true
-    },
-    // 头部内容
-    header: {
-        type: [String, Boolean, Function],
-        default: true
-    },
-    // 对话框类型
-    mode: {
-        type: String,
-        default: 'modal',
-        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
-    },
-    // 对话框位置，类似 CSS 中的 position
-    placement: {
-        type: String,
-        default: 'top',
-        validator: (val) => ['top', 'center'].includes(val)
-    },
-    // 是否显示遮罩层
-    showOverlay: {
-        type: Boolean,
-        default: true
-    },
-    // 控制对话框显示与隐藏
-    visible: {
-        type: Boolean,
-        default: undefined
-    },
-    // 对话框宽度
-    width: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 对话框层级
-    zIndex: {
-        type: Number,
-        default: undefined
-    }
-});
-
-// 显示状态
-const isVisible = ref(props.visible);
-
-// 监听visible属性变化
-watch(() => props.visible, (newValue) => {
-    isVisible.value = newValue;
-});
-
-// 定义事件
-const emit = defineEmits([
-    'cancel',
-    'close',
-    'close-btn-click',
-    'confirm',
-    'esc-keydown',
-    'overlay-click',
-    'opened',
-    'closed',
-    'update:visible'
-]);
-
-// 取消按钮点击事件
-const handleCancel = (e) => {
-    emit('cancel', { e });
-    emit('close', { trigger: 'cancel', e });
-    emit('update:visible', false);
-};
-
-// 关闭事件
-const handleClose = (context) => {
-    emit('close', context);
-    emit('update:visible', false);
-};
-
-// 关闭按钮点击事件
-const handleCloseBtnClick = (e) => {
-    emit('close-btn-click', { e });
-    emit('close', { trigger: 'close-btn', e });
-    emit('update:visible', false);
-};
-
-// 确认按钮点击事件
-const handleConfirm = (e) => {
-    emit('confirm', { e });
-    emit('update:visible', false);
-};
-
-// ESC 按键按下事件
-const handleEscKeydown = (e) => {
-    emit('esc-keydown', { e });
-    emit('close', { trigger: 'esc', e });
-    emit('update:visible', false);
-};
-
-// 遮罩层点击事件
-const handleOverlayClick = (e) => {
-    emit('overlay-click', { e });
-    emit('close', { trigger: 'overlay', e });
-    emit('update:visible', false);
-};
-
-// 对话框打开完成事件
-const handleOpened = () => {
-    emit('opened');
-};
-
-// 对话框关闭完成事件
-const handleClosed = () => {
-    emit('closed');
-};
-
-// 更新可见状态
-const handleUpdateVisible = (visible) => {
-    isVisible.value = visible;
-    emit('update:visible', visible);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-dialog v-model:visible="isVisible" :attach="attach" :body="body" :cancel-btn="cancelBtn" :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown" :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn" :default-visible="defaultVisible" :destroy-on-close="destroyOnClose"
+        :draggable="draggable" :footer="footer" :header="header" :mode="mode" :placement="placement"
+        :show-overlay="showOverlay" :width="width" :z-index="zIndex" @cancel="handleCancel" @close="handleClose"
+        @close-btn-click="handleCloseBtnClick" @confirm="handleConfirm" @esc-keydown="handleEscKeydown"
+        @overlay-click="handleOverlayClick" @opened="handleOpened" @closed="handleClosed"
+        @update:visible="handleUpdateVisible">
+        <!-- 头部插槽 -->
+        <template v-if="$slots.header" #header>
+            <slot name="header"></slot>
+        </template>
+
+        <!-- 内容插槽 -->
+        <template v-if="$slots.body" #body>
+            <slot name="body"></slot>
+        </template>
+
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+
+        <!-- 取消按钮插槽 -->
+        <template v-if="$slots.cancelBtn" #cancel-btn>
+            <slot name="cancelBtn"></slot>
+        </template>
+
+        <!-- 确认按钮插槽 -->
+        <template v-if="$slots.confirmBtn" #confirm-btn>
+            <slot name="confirmBtn"></slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容
+    body: {
+        type: [String, Function],
+        default: ''
+    },
+    // 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    cancelBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 关闭按钮，值为 true 显示默认关闭按钮；值为 false 则不显示关闭按钮；值类型为 string 则直接显示值；值类型为 TNode，则显示自定义按钮
+    closeBtn: {
+        type: [Boolean, String, Function],
+        default: true
+    },
+    // 按下 ESC 时是否触发对话框关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: undefined
+    },
+    // 点击蒙层时是否触发关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: undefined
+    },
+    // 确认按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    confirmBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 对话框默认是否显示
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否在关闭弹框的时候销毁子元素
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框是否可以拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部操作栏，默认会有"确认"和"取消"两个按钮
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [String, Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置，类似 CSS 中的 position
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 控制对话框显示与隐藏
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: undefined
+    }
+});
+
+// 显示状态
+const isVisible = ref(props.visible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    isVisible.value = newValue;
+});
+
+// 定义事件
+const emit = defineEmits([
+    'cancel',
+    'close',
+    'close-btn-click',
+    'confirm',
+    'esc-keydown',
+    'overlay-click',
+    'opened',
+    'closed',
+    'update:visible'
+]);
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', { e });
+    emit('close', { trigger: 'cancel', e });
+    emit('update:visible', false);
+};
+
+// 关闭事件
+const handleClose = (context) => {
+    emit('close', context);
+    emit('update:visible', false);
+};
+
+// 关闭按钮点击事件
+const handleCloseBtnClick = (e) => {
+    emit('close-btn-click', { e });
+    emit('close', { trigger: 'close-btn', e });
+    emit('update:visible', false);
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', { e });
+    emit('update:visible', false);
+};
+
+// ESC 按键按下事件
+const handleEscKeydown = (e) => {
+    emit('esc-keydown', { e });
+    emit('close', { trigger: 'esc', e });
+    emit('update:visible', false);
+};
+
+// 遮罩层点击事件
+const handleOverlayClick = (e) => {
+    emit('overlay-click', { e });
+    emit('close', { trigger: 'overlay', e });
+    emit('update:visible', false);
+};
+
+// 对话框打开完成事件
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 对话框关闭完成事件
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 更新可见状态
+const handleUpdateVisible = (visible) => {
+    isVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>