@ebiz/designer-components 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizDropdown.vue

@@ -0,0 +1,136 @@
+<template>
+    <t-dropdown :disabled="disabled" :direction="direction" :hideAfterItemClick="hideAfterItemClick"
+        :max-column-width="maxColumnWidth" :max-height="maxHeight" :min-column-width="minColumnWidth" :options="options"
+        :placement="placement" :trigger="trigger" @click="handleClick">
+        <!-- 默认触发器内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <template v-if="$slots.dropdown" #dropdown>
+            <slot name="dropdown">
+            </slot>
+        </template>
+
+        <!-- 自定义选项内容插槽 -->
+        <template v-if="$slots.options" #options>
+            <slot name="options"></slot>
+        </template>
+    </t-dropdown>
+</template>
+
+<script>
+export default {
+    name: "EbizDropdown"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Dropdown as TDropdown } from 'tdesign-vue-next';
+
+defineProps({
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 多层级操作时，子层级展开方向
+    direction: {
+        type: String,
+        default: 'right',
+        validator: (val) => ['left', 'right'].includes(val)
+    },
+    // 点击选项后是否自动隐藏弹层
+    hideAfterItemClick: {
+        type: Boolean,
+        default: true
+    },
+    // 选项最大宽度，内容超出时，显示为省略号
+    maxColumnWidth: {
+        type: String,
+        default: '100px'
+    },
+    // 弹窗最大高度，单位：px
+    maxHeight: {
+        type: Number,
+        default: 300
+    },
+    // 选项最小宽度
+    minColumnWidth: {
+        type: String,
+        default: '10px'
+    },
+    // 下拉操作项
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 弹窗出现位置
+    placement: {
+        type: String,
+        default: 'bottom-left',
+        validator: (val) => [
+            'top', 'top-left', 'top-right',
+            'bottom', 'bottom-left', 'bottom-right',
+            'left', 'left-top', 'left-bottom',
+            'right', 'right-top', 'right-bottom'
+        ].includes(val)
+    },
+
+    // 触发下拉显示的方式
+    trigger: {
+        type: String,
+        default: 'hover',
+        validator: (val) => ['hover', 'click', 'focus', 'context-menu'].includes(val)
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (...args) => {
+    emit('click', ...args);
+};
+</script>
+
+<style lang="less" scoped>
+/* TDesign主题样式定制 */
+:deep(.t-dropdown) {
+    .t-dropdown__trigger {
+        cursor: pointer;
+    }
+}
+
+:deep(.t-dropdown__menu) {
+    max-height: 300px;
+    overflow-y: auto;
+
+    /* 解决嵌套菜单层级问题 */
+    .t-dropdown__menu {
+        z-index: 9999;
+        position: absolute;
+    }
+}
+
+/* 嵌套菜单项样式优化 */
+:deep(.t-dropdown-item) {
+    position: relative;
+
+    /* 当有子菜单时，添加指示箭头 */
+    &:has(.t-dropdown__menu) {
+        &:after {
+            content: '';
+            position: absolute;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-left: 4px solid currentColor;
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            opacity: 0.6;
+        }
+    }
+}
+</style>

package/src/components/EbizDropdownItem.vue

@@ -0,0 +1,86 @@
+<template>
+    <t-dropdown-item :content="content" :disabled="disabled" :divider="divider" :value="value" @click="handleClick">
+        <!-- 默认内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <!-- 前缀图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefixIcon>
+            <slot name="prefixIcon"></slot>
+        </template>
+
+        <!-- 后缀图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffixIcon>
+            <slot name="suffixIcon"></slot>
+        </template>
+
+        <!-- 嵌套的下拉菜单 -->
+        <t-dropdown-menu v-if="$slots.submenu">
+            <slot name="submenu"></slot>
+        </t-dropdown-menu>
+    </t-dropdown-item>
+</template>
+
+<script>
+export default {
+    name: "EbizDropdownItem"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu } from 'tdesign-vue-next';
+
+defineProps({
+    // 下拉操作项内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示操作项之间的分隔线（分隔线默认在下方）
+    divider: {
+        type: Boolean,
+        default: false
+    },
+    // 下拉操作项唯一标识
+    value: {
+        type: [String, Number, Object],
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (data, context) => {
+    emit('click', data, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* TDesign主题样式定制 */
+:deep(.t-dropdown-item) {
+    &:hover {
+        background-color: var(--td-bg-color-container-hover);
+    }
+
+    &.t-is-disabled {
+        color: var(--td-text-color-disabled);
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
+    }
+}
+
+:deep(.t-dropdown-item__divider) {
+    margin: 4px 0;
+    border-bottom: 1px solid var(--td-border-level-1-color);
+}
+</style>

package/src/index.js

@@ -92,6 +92,8 @@ import EbizSFormItem from './components/senior/EbizSForm/item.vue';
 import EbizSDialog from "./components/senior/EbizSDialog/index.vue";
 import EbizMeetingRoomSelector from './components/EbizMeetingRoomSelector.vue';
 import EbizMobileMeetingRoomSelector from './components/EbizMobileMeetingRoomSelector.vue';
+import EbizDropdown from './components/EbizDropdown.vue';
+import EbizDropdownItem from './components/EbizDropdownItem.vue';
 
 
 // 导出组件
@@ -217,8 +219,12 @@ export {
   // 新增 EbizApproval 组件
   EbizApproval,
   EbizDiv,
+  // 下拉菜单组件
+  EbizDropdown,
+  // 下拉菜单项组件
+  EbizDropdownItem,
   // 会议室选择器组件
   EbizMeetingRoomSelector,
   // 新增 EbizMobileMeetingRoomSelector 组件
   EbizMobileMeetingRoomSelector
-};
+}