sangtian152 / vue3-tree-org

基于vue3.x + typeScript 实现的组织架构图
MIT License
132 stars 19 forks source link

工具栏里面的title文字可以支持多语言吗,或者使用自定义的文字 #8

Closed fh332393900 closed 2 years ago

sangtian152 commented 2 years ago

不支持

hagabaka commented 1 year ago

I'm using this "hack" to overwrite the title attributes:

import { watch } from 'vue';
import { useMutationObserver } from '@vueuse/core';
const treeRef = ref(); // ref to the Vue3TreeOrg component
function translateTooltips(treeEl) {
  const translations = {
    '全部收起': 'Collapse All',
    '全部展开': 'Expand All',
    '退出全屏': 'Exit Fullscreen',
    '全屏': 'Fullscreen',
    '放大': 'Zoom In',
    '缩小': 'Zoom Out',
    '还原': 'Reset',
  }
  for(const [original, translated] of Object.entries(translations)) {
    treeEl?.querySelector(`[title="${original}"]`)?.setAttribute('title', translated);
  }
}
watch(treeRef, treeRef => {
  const treeEl = treeRef?.eleRef;
  translateTooltips(treeEl);
  useMutationObserver(treeEl, () => translateTooltips(treeEl), {
    attributes: true,
    subtree: true,
  })
}, {
  immediate: true,
});