vue-element-ui-x 1.0.3 → 1.0.5

package/src/components/Conversations/src/components/item.vue

@@ -1,350 +0,0 @@
-<template>
-  <li
-    :key="item.key"
-    class="el-x-conversation-item"
-    :class="{
-      disabled: item.disabled,
-      active: active,
-      hovered: item.disabled ? false : isHovered,
-      'menu-opened': isShowMenuBtn,
-    }"
-    :style="{
-      ...itemsStyle,
-      ...(isHovered ? itemsHoverStyle : {}),
-      ...(isShowMenuBtn ? itemsMenuOpenedStyle : {}),
-      ...(active ? itemsActiveStyle : {}),
-    }"
-    @click="handleClick(item.key)"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <div class="el-x-conversation-content">
-      <!-- 标签区域 - 通过插槽自定义 -->
-      <div class="el-x-conversation-content-main">
-        <slot name="label">
-          <!-- 前缀图标 -->
-          <span
-            v-if="prefixIconRender"
-            class="el-x-conversation-prefix-icon"
-          >
-            <i :class="prefixIcon"></i>
-          </span>
-
-          <!-- 标签和时间戳 -->
-          <div class="el-x-conversation-label-container">
-            <el-tooltip
-              v-if="showTooltip && isTextOverflow(item.label)"
-              :content="item.label"
-              :placement="tooltipPlacement"
-              :offset="tooltipOffset"
-              effect="dark"
-            >
-              <span
-                class="el-x-conversation-label"
-                :class="{ 'text-gradient': isTextOverflow(item.label) }"
-                :style="labelStyle"
-              >
-                {{ item.label }}
-              </span>
-            </el-tooltip>
-            <span
-              v-else
-              class="el-x-conversation-label"
-              :class="{ 'text-gradient': isTextOverflow(item.label) }"
-              :style="labelStyle"
-            >
-              {{ item.label }}
-            </span>
-          </div>
-        </slot>
-      </div>
-
-      <!-- 后缀图标 -->
-      <span
-        v-if="suffixIcon"
-        class="el-x-conversation-suffix-icon"
-      >
-        <i :class="suffixIcon"></i>
-      </span>
-
-      <!-- 菜单区域 - 只在hover或active状态下显示 -->
-      <div v-if="shouldShowMenu && showBuiltInMenu">
-        <div
-          v-if="menu && menu.length"
-          ref="menuButtonRef"
-          class="el-x-conversation-dropdown-more"
-          @click.stop
-        >
-          <el-dropdown
-            trigger="click"
-            :placement="menuPlacement"
-            :disabled="item.disabled"
-            @visible-change="updateMenuStatus"
-            @command="onMenuCommand"
-          >
-            <span class="el-dropdown-link">
-              <slot
-                name="more-filled"
-                :item="item"
-                :is-hovered="item.disabled ? false : isHovered"
-                :is-active="active"
-                :is-menu-opened="isShowMenuBtn"
-                :is-disabled="item.disabled"
-              >
-                <i class="el-icon-more el-x-conversation-dropdown-more-icon"></i>
-              </slot>
-            </span>
-            <el-dropdown-menu
-              slot="dropdown"
-              :style="mergedMenuStyle"
-            >
-              <slot name="menu">
-                <el-dropdown-item
-                  v-for="menuItem in menu"
-                  :key="menuItem.key"
-                  :icon="menuItem.icon"
-                  :disabled="menuItem.disabled"
-                  :divided="menuItem.divided"
-                  :command="menuItem.command"
-                  :style="menuItem.menuItemStyle"
-                >
-                  {{ menuItem.label }}
-                </el-dropdown-item>
-              </slot>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-      </div>
-    </div>
-  </li>
-</template>
-
-<script>
-  export default {
-    name: 'ConversationsItem',
-
-    props: {
-      item: {
-        type: Object,
-        required: true,
-      },
-      itemsStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      itemsHoverStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      itemsActiveStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      itemsMenuOpenedStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      prefixIcon: {
-        type: [String, Object],
-        default: null,
-      },
-      suffixIcon: {
-        type: [String, Object],
-        default: null,
-      },
-      showTooltip: {
-        type: Boolean,
-        default: false,
-      },
-      labelMaxWidth: {
-        type: Number,
-        default: undefined,
-      },
-      menu: {
-        type: Array,
-        default: () => [],
-      },
-      showBuiltInMenu: {
-        type: Boolean,
-        default: false,
-      },
-      tooltipPlacement: {
-        type: String,
-        default: 'top',
-      },
-      tooltipOffset: {
-        type: Number,
-        default: 12,
-      },
-      menuPlacement: {
-        type: String,
-        default: 'bottom-start',
-      },
-
-      menuStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      menuShowArrow: {
-        type: Boolean,
-        default: false,
-      },
-      active: {
-        type: Boolean,
-        default: false,
-      },
-      activeKey: {
-        type: [String, Number],
-        default: '',
-      },
-    },
-
-    data() {
-      return {
-        isHovered: false,
-        isShowMenuBtn: false,
-        menuButtonRef: null,
-      };
-    },
-
-    computed: {
-      prefixIconRender() {
-        return this.prefixIcon;
-      },
-
-      suffixIconRender() {
-        return this.suffixIcon;
-      },
-
-      isTextOverflow() {
-        return (label = '') => {
-          // 如果没有设置labelMaxWidth，直接返回false
-          if (!this.labelMaxWidth) return false;
-
-          // 创建一个临时的span元素来测量文本宽度
-          const span = document.createElement('span');
-          span.style.visibility = 'hidden';
-          span.style.position = 'absolute';
-          span.style.whiteSpace = 'nowrap';
-          span.style.fontSize = '14px'; // 与CSS中定义的字体大小一致
-          span.textContent = label;
-
-          document.body.appendChild(span);
-          const textWidth = span.offsetWidth;
-          document.body.removeChild(span);
-
-          // 如果文本宽度大于最大宽度，则返回true表示溢出
-          return textWidth > this.labelMaxWidth;
-        };
-      },
-
-      labelStyle() {
-        // 如果有labelMaxWidth，设置最大宽度并使用截断样式
-        if (this.labelMaxWidth) {
-          return {
-            maxWidth: `${this.labelMaxWidth}px`,
-            overflow: 'hidden',
-          };
-        }
-        // 否则返回空对象
-        return {};
-      },
-
-      shouldShowMenu() {
-        return this.isHovered || this.active || this.isShowMenuBtn;
-      },
-
-      mergedMenuStyle() {
-        return {
-          ...this.menuStyle,
-        };
-      },
-    },
-
-    methods: {
-      handleMouseEnter() {
-        this.isHovered = true;
-      },
-
-      handleMouseLeave() {
-        this.isHovered = false;
-      },
-
-      handleClick(key) {
-        this.$emit('click', key);
-      },
-
-      // 辅助函数：驼峰式转短横线格式
-      camelToKebab(str) {
-        return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-      },
-
-      // 当菜单显示、隐藏时候触发
-      updateMenuStatus(isOpen) {
-        this.isShowMenuBtn = isOpen;
-        if (isOpen) {
-          // 延迟执行，确保菜单已经渲染完成
-          // 展开菜单时候 决定隐藏箭头
-          this.$nextTick(() => {
-            // 获取页面的所有 el-dropdown-menu el-popper 组件
-            const dropdownMenu = document.querySelectorAll('.el-dropdown-menu.el-popper');
-
-            if (dropdownMenu.length === 0) {
-              return;
-            }
-            dropdownMenu.forEach(dropdownMenuItem => {
-              // 将它子元素中所有 popper__arrow 元素的 display 设置为 none
-              // 如果 dropdownMenuItem 存在，且display 不为 none
-              if (dropdownMenuItem && dropdownMenuItem.style.display !== 'none') {
-                // 隐藏箭头
-                const arrows = dropdownMenuItem.querySelectorAll('.popper__arrow');
-                if (arrows.length === 0) {
-                  return;
-                }
-                arrows.forEach(arrow => {
-                  arrow.style.display = this.menuShowArrow ? 'block' : 'none';
-                });
-
-                // 设置 .el-dropdown-menu__item 悬停样式
-                const items = dropdownMenuItem.querySelectorAll('.el-dropdown-menu__item');
-                if (items.length === 0) {
-                  return;
-                }
-                items.forEach((item, index) => {
-                  if (!this.menu || this.menu.length === 0) {
-                    return;
-                  }
-                  const menuItemHoverStyle = this.menu[index].menuItemHoverStyle || {};
-                  // 生成固定类名（基于索引）
-                  const className = `custom-hover-${index}`;
-                  item.classList.add(className);
-                  // 动态插入样式规则
-                  const style = document.createElement('style');
-                  style.textContent = `
-                  .${className}:hover,
-                  .${className}:focus {
-                    ${Object.entries(menuItemHoverStyle)
-                      .map(([prop, val]) => `${this.camelToKebab(prop)}: ${val} !important;`)
-                      .join(' ')}
-                  }
-                `;
-                  document.head.appendChild(style);
-                });
-              }
-            });
-          });
-        }
-      },
-
-      // 菜单命令处理
-      onMenuCommand(command) {
-        // 如果已经有自定义插槽，则不执行这个函数
-        // 菜单的所有内容由开发者自行处理
-        if (this.$scopedSlots.menu) {
-          return false;
-        }
-        this.$emit('menu-command', command, this.item);
-      },
-    },
-  };
-</script>