JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-27 12:22:09 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 组件列表支持设置tooltip显示详情

Browse Source
This commit is contained in:
roymondchen 2023-10-24 14:58:37 +08:00
parent 2e5b5665ce
commit 6a5374726e
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor/src/components/Icon.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon> <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
<TMagicIcon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon" <TMagicIcon
v-else-if="typeof icon === 'string' && (icon.startsWith('http') || isRelativePath(icon))"
class="magic-editor-icon"
><img :src="icon" ><img :src="icon"
/></TMagicIcon> /></TMagicIcon>
<i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i> <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
@ -20,4 +22,6 @@ defineOptions({
defineProps<{ defineProps<{
icon?: any; icon?: any;
}>(); }>();
const isRelativePath = (str: string) => /^(\.|(\.\.)?\/)/.test(str);
</script> </script>

7
packages/editor/src/layouts/sidebar/ComponentListPanel.vue
View File

@ -18,8 +18,9 @@
@drag="dragHandler" @drag="dragHandler"
> >
<slot name="component-list-item" :component="item"> <slot name="component-list-item" :component="item">
<MIcon :title="item.text" :icon="item.icon"></MIcon> <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
<MIcon :icon="item.icon"></MIcon>
</TMagicTooltip>
<span :title="item.text">{{ item.text }}</span> <span :title="item.text">{{ item.text }}</span>
</slot> </slot>
</div> </div>
@ -34,7 +35,7 @@ import { computed, inject, ref } from 'vue';
import { Grid } from '@element-plus/icons-vue'; import { Grid } from '@element-plus/icons-vue';
import serialize from 'serialize-javascript'; import serialize from 'serialize-javascript';
import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar } from '@tmagic/design'; import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
import { removeClassNameByClassName } from '@tmagic/utils'; import { removeClassNameByClassName } from '@tmagic/utils';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';

2
packages/editor/src/type.ts
View File

@ -334,6 +334,8 @@ export interface SideBarData {
export interface ComponentItem { export interface ComponentItem {
/** 显示文案 */ /** 显示文案 */
text: string; text: string;
/** 详情，用于tooltip */
desc?: string;
/** 组件类型 */ /** 组件类型 */
type: string; type: string;
/** Vue组件或url */ /** Vue组件或url */